如何在ng-repeat中启用ng-options ?

I'm trying to use ng-options inside ng-repeat, but seems I'm missing something bwcause I do not see any values populated into the select control.

我正在尝试在ng-repeat中使用ng-options，但是似乎我丢失了一些bww，因为我没有看到任何填充到select控件中的值。

Here is the html code:

这里是html代码:

<div ng-controller="testCtrl">
    <table border="1" style="width:300px">
        <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
        <th>select</th>
        </tr>
        <tr ng-repeat="person in persons">                        
            <td>{{ person.id }}</td>
            <td>{{ person.name }}</td>
            <td>{{ person.age }}</td>               
            <td>
            <select ng-model="person.chosenNumber" ng-options="suggestion.number as suggestion.destination for suggestion in person.suggestedPhones"></select>
            <button ng-click="showSelected()">Ok</button>
            </td>
        </tr>        
    </table>
</div>

Js code:

Js代码:

var testModule = angular.module('myApp', []);

function testCtrl($scope) {                      

$scope.persons = [
    {'id': 1, 'name': 'omer', 'age': 35,  'suggestedPhones': {'destination': 'home', 'number': '0544317259'} },
    {'id': 2, 'name': 'noam', 'age': 32, 'suggestedPhones': {'destination': 'home', 'number': '036024607'} },
    {'id': 3, 'name': 'dafna', 'age': 28, 'suggestedPhones': {'destination': 'home', 'number': '0522318779'} }
]

$scope.showSelected = function () {
    alert(1);       
}
}

fiddle

小提琴

2 个解决方案

#1

Either the suggestedPhones is wrong (should be array) or you should use the label for (key , value) in object (ref) variant of ng-options. Try the following, if it is indeed what you want:

无论是暗示式phone是错误的(应该是数组)，还是您应该在ng-options的对象(ref)变体中使用标签for (key, value)。如果这确实是你想要的，试试下面的方法:

$scope.persons = [
    {'id': 1, 'name': 'omer', 'age': 35,  'suggestedPhones': [{'destination': 'home', 'number': '0544317259'}] },
    {'id': 2, 'name': 'noam', 'age': 32, 'suggestedPhones': [{'destination': 'home', 'number': '036024607'}] },
    {'id': 3, 'name': 'dafna', 'age': 28, 'suggestedPhones': [{'destination': 'home', 'number': '0522318779'}] }
]

(The suggestedPhones have become arrays.)

(建议电话已经变成了数组。)

(UPDATE RELEVANT TO COMMENT) Getting the selected person and phone data is as simple as:

(更新相关评论)获取所选人员和电话数据非常简单:

<button ng-click="showSelected(person)">Ok</button>

And in the JS:

在JS:

$scope.showSelected = function (person) {
    console.log(person);        
}

Check it out: http://jsfiddle.net/C5jK9/

检查一下:http://jsfiddle.net/C5jK9/

#2

-1

HTML:

<div ng-controller="testCtrl">
    <table border="1" style="width:300px">
        <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
        <th>select</th>
        </tr>
        <tr ng-repeat="person in persons">                        
            <td>{{ person.id }}</td>
            <td>{{ person.name }}</td>
            <td>{{ person.age }}</td>               
            <td>
            <select ng-model="person.chosenNumber" ng-options="suggestion.number as suggestion.destination for suggestion in person.suggestedPhones"></select>
            <button ng-click="showSelected($index)">Ok</button>
            </td>
        </tr>        
    </table>
</div>

Javascript:

var testModule = angular.module('myApp', []);

function testCtrl($scope) {                      

$scope.persons = [
    {'id': 1, 'name': 'omer', 'age': 35,  'suggestedPhones': {'destination': 'home', 'number': '0544317259'} },
    {'id': 2, 'name': 'noam', 'age': 32, 'suggestedPhones': {'destination': 'home', 'number': '036024607'} },
    {'id': 3, 'name': 'dafna', 'age': 28, 'suggestedPhones': {'destination': 'home', 'number': '0522318779'} }
]

$scope.showSelected = function (data) {
    alert($scope.persons[data].chosenNumber);       
}

#1