AngularJS +材料库-错误：[$parse:syntax]

Question

在尝试使用AngularJS材料库的指令时，我似乎无法调和一些下拉数据。这是我的第一个角度计划，它建立在一个平均堆栈上。

，这是我的控制器代码：

(function () {
 'use strict';
  angular.module('myModule')
    .controller('mainCtrl', ['$scope', '$window', 'apiService',
      function mainCtrl($scope, $window, apiService) {
        $scope.mainInfo = {
          actionCodeList: []
          //More items below...
        }

        //Get Action Codes
        apiService.getDropdownData('actioncodes')
          .then(function(res) {
            $scope.mainInfo.actionCodeList = res;
            return $scope.mainInfo.actionCodeList;
        });
      }
    ]);

其思想是声明一个对象，该对象将保存表单上一系列下拉列表中的所有相关数据。我已经证实数据是以如下所示的结构从服务器返回的

数据：

0:{action_cd: "06", descr: "Account Code Change"}
1:{action_cd: "18", descr: "Account Code Change (Program)"}
//a few hundred more after this...

最后，该数据正在像这样的特定模板文件中使用(注意，我有一个配置文件，它将这个模板分配给正确的控制器，这就是为什么我省略了ng控制器位：)

<form name="userForm" class="col-md-12 row">
  <md-content md-theme="docs-light" layout-gt-sm="row" class="col-md-12 h-15" layout-padding>
    <md-input-container class="col-md-4 h-60">
      <label>Select an Action:</label>
      <md-select ng-model="actionCodeModel" >
        <md-option ng-repeat="actionCode in mainInfo.actionCodeList" ng-value="{{ actionCode.descr }}">
          {{ actionCode.descr }}
        </md-option>
      </md-select>
    </md-input-container>
  <md-content>
</form>

这里有个问题：

当我运行这个命令时，下拉列表会很好地填充，但是我的控制台中的每一项都会出现错误。例如：

Error: [$parse:syntax] Syntax Error: Token 'Code' is an unexpected token at 
column 9 of the expression [Account Code Change] starting at [Code Change].
http://errors.angularjs.org/1.6.8/$parse/syntax?p0=Code&p1=is%20an%20unexpected%20token&p2=9&p3=Account%20Code%20Change&p4=Code%20Change
at angular.js:116
at AST.throwError (angular.js:15349)
at AST.ast (angular.js:15099)
at Parser.getAst (angular.js:16458)
at Parser.parse (angular.js:16441)
at $parse (angular.js:16599)
at ChildScope.scopePrototype.$watch (hint.js:1449)
at Object.<anonymous> (angular-aria.js:142)
at angular.js:1383
at invokeLinkFn (angular.js:10610) "<md-option ng-repeat="actionCode in mainInfo.actionCodeList" ng-value="{{ actionCode.descr }}" tabindex="0" class="ng-scope" data-ng-animate="1">"

此外，选择其中一个选项将清除select的值。

将这些转换成纯文本和标签可以完全清除问题，但我需要在这里使用材料。有人知道我错过了什么吗？

Answer 1

HTML代码中有两个错误。

首先，您忘记关闭md-content标记。

导致问题的第二个原因是，ngValue指令不需要内插括号来匹配控制器属性。

ng-value="actionCode.descr"会起作用的。

<md-select ng-model="actionCodeModel">
  <md-option ng-repeat="actionCode in mainInfo.actionCodeList" ng-value="actionCode.descr">
      {{ actionCode.descr }}
  </md-option>
</md-select>

工作演示