我正在尝试在ng-options
内使用ng-repeat
,但似乎我错过了一些东西,因为我没有看到任何值填充到选择控件中。
这是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代码:
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);
}
}
答案 0 :(得分:4)
suggestedPhones
错误(应该是数组),或者您应该使用label for (key , value) in object
的{{1}}(ref)变体。如果确实如此,请尝试以下方法:
ng-options
($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'}] }
]
已成为数组。)
(更新与评论相关)获取所选人员和电话数据非常简单:
suggestedPhones
在JS中:
<button ng-click="showSelected(person)">Ok</button>
答案 1 :(得分:-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);
}