Question

控制器中的

console.log正在输出对象{name:'12345235'}，这很好，但尝试使用HTML部分中的ng-option属性会出现以下错误，我已尝试返回来自服务的多个嵌套对象，但仍然在控制台中得到以下错误，任何提示/帮助赞赏，在这个阶段难倒，不知道我还能尝试什么？

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.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标签而不是section的正确结构（在这种情况下也不要忘记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 as，

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

Answer 3

在我的情况下，我收到此错误，因为ng-model

中没有<select>属性

ngOptions返回数据时出错

3 个答案: