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

Question

在尝试使用 AngularJS 材料库中的指令时，我似乎无法协调一些下拉数据。这是我的第一个 Angular 项目，它建立在 MEAN 堆栈之上

这是我的控制器代码：

(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-controller 位的原因：）

HTML

<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">"

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

将这些转换为普通和标签可以完全解决问题，但我需要在这里使用材料。有谁知道我错过了什么？

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>

Working demo