Ng-数组中对象的选项

时间:2016-01-29 20:11:52

标签: angularjs

这里我有一个选择,我想在供应商处重复联系。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
    Hello {{name}}
    
    <div ng-repeat="supplier in suppliers">
        {{supplier.name}}
        
        <select ng-options="contact.id as contact.name for contact in supplier.contacts">
        
        </select>
    </div>
    
</div>
<script>
var app = angular.module('app',[]);
    
    //app.directive('appDirective', function() {});
    //app.factory('appService', function() {});
    
    app.controller('AppCtrl', ['$scope', function($scope){
        $scope.name = "dave";
        
        $scope.suppliers = [
        		{id: 0, name: "dave", contacts : [
            	{id: 0, name: 'c1'},
              {id: 1, name: 'c2'},
              {id: 2, name: 'c3'},
              {id: 3, name: 'c4'},
            ]},
            {id: 1, name: "Steve", contacts : [
            	{id: 0, name: 'c1'},
              {id: 1, name: 'c2'},
              {id: 2, name: 'c3'},
              {id: 3, name: 'c4'},
            ]}
        ]
    }]);

</script>

这里有控制器。

为什么这似乎不起作用?

http://jsfiddle.net/gnosticdave/091vpadb/1/

2 个答案:

答案 0 :(得分:2)

contacts是每个supplier的一部分 - 因此您的数组实际上是supplier.contacts

select ng-options="contact.id as contact.name for contact in supplier.contacts"
                                                           ^^^^^^^^^^^^^^^^^^^^

此外,ngOptions需要ngModel

演示:http://jsfiddle.net/091vpadb/3/

答案 1 :(得分:0)

变化:

<select ng-options="contact.id as contact.name for contact in contacts">

为:

<select ng-options="contact.id as contact.name for contact in supplier.contacts">