返回数据时 ngOptions 出错

Question

控制器中的

console.log 正在输出对象 {name:'12345235'} 这很好但是尝试使用 HTML 部分中的 ng-option 属性会出现以下错误，我已经尝试从服务返回多个嵌套对象，但仍然在控制台中出现以下错误，任何人 tips/help 感谢，在这个阶段被难住了，不知道我还能尝试什么？

HTML:

<html ng-app="app">
...
<body>
    ...
    <div ng-controller="SetsController">
        <section ng-options="set in sets"><p>{{set.name}}</p></section>
    </div>
    ...
</body>
</html>

Angular代码：

angular.module('app', []);

angular.module('app').controller('SetsController', ['$scope', 'setsService', function($scope, setsService){
    $scope.sets = setsService.display('123', 3);
    console.log($scope.sets);
}]);

angular.module('app').service('setsService', function(){
    this.display = function(setId, limit) {
        return {name:'12345235'}
    }
});

控制台错误：

Error: [$compile:ctreq] http://errors.angularjs.org/1.4.7/$compile/ctreq?p0=select&p1=ngOptions
I/<@http://devt.local.one/core/lib/angular.js:6:416
t@http://devt.local.one/core/lib/angular.js:59:233
t@http://devt.local.one/core/lib/angular.js:59:300
K@http://devt.local.one/core/lib/angular.js:62:78
g@http://devt.local.one/core/lib/angular.js:54:410
K@http://devt.local.one/core/lib/angular.js:61:1
g@http://devt.local.one/core/lib/angular.js:54:410
g@http://devt.local.one/core/lib/angular.js:54:433
g@http://devt.local.one/core/lib/angular.js:54:433
g@http://devt.local.one/core/lib/angular.js:54:433
g@http://devt.local.one/core/lib/angular.js:54:433
W/<@http://devt.local.one/core/lib/angular.js:53:480
zc/d/</<@http://devt.local.one/core/lib/angular.js:20:99
lf/this.$get</n.prototype.$eval@http://devt.local.one/core/lib/angular.js:133:217
lf/this.$get</n.prototype.$apply@http://devt.local.one/core/lib/angular.js:133:446
zc/d/<@http://devt.local.one/core/lib/angular.js:20:57
e@http://devt.local.one/core/lib/angular.js:39:191
zc/d@http://devt.local.one/core/lib/angular.js:19:1
zc@http://devt.local.one/core/lib/angular.js:20:274
Zd@http://devt.local.one/core/lib/angular.js:19:83
@http://devt.local.one/core/lib/angular.js:293:238
a@http://devt.local.one/core/lib/angular.js:174:399
Hf/c@http://devt.local.one/core/lib/angular.js:35:212

http://devt.local.one/core/lib/angular.js
Line 107

Answer 1

ngOptions 指令需要 select 指令。它不能单独使用。因此，您应该使用带有 select 标记而不是部分的适当结构（在这种情况下也不要忘记 ngModel）或使用 ngRepeat:

<div ng-controller="SetsController">
    <section ng-repeat="set in sets"><p>{{set.name}}</p></section>
</div>

Answer 2

ng-options 应该与 select 标签一起使用。请参阅 ng-options 文档。在这种情况下，您需要使用 ng-repeat

例如，

<select ng-model="myColor" ng-options="color.name for color in colors">
   <option value="">-- choose color --</option>
</select>

在您的情况下，您需要使用 ng-repeat 作为，

<section ng-repeat="set in sets"><p>{{set.name}}</p></section>

Answer 3

就我而言，我收到此错误是因为我在 <select>

中没有 ng-model 属性

返回数据时 ngOptions 出错

ngOptions Erroring when data is returned

javascript

angularjs

ng-options

angular-services

angularjs-ng-options