AngularJS + 材质库 - 错误: [$parse:语法]

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 控制器位的原因：)

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

工作演示