在 Controller 中
$scope.persons = [{"id": 1, "name": "Diso"}, {"id": 2, "name": "Tatalop"}];
在创建页面我有这个代码。
<select name="person" ng-options="person.id as person.name for person in persons" ng-model="job.person_id">
<option value="">Select a Person</option>
</select>
上面的下拉列表将显示人员name
,其值将为人员id
。如果我提交表单,那么我将正确获取人员id
。这是完美的工作。
在更新页面我想使用相同的代码(相同的 Controller 和相同的html文件)。此下拉列表现在需要自动选择。假设页面加载时下拉列表应自动选择第二个人。为了使其成功,我在 Controller 中编写了 $scope.job.person_id = $scope.persons[1];
。
现在的问题是,如果我从 ng-options
中删除 person.id as
,那么只有自动选择功能有效,否则它将不起作用。现在,如果我删除 person_id as
,那么我会得到整个对象({"id": 2, "name": "Tatalop"}
) 作为下拉的结果。但我只想要人id
。
如何做到这一点?我错过了什么吗?有人可以推荐我吗?
最佳答案
请检查这个 fiddle ,它可能会有所帮助 http://jsfiddle.net/linkolen/cuvjfept/
angular.module('myApp', []);
function TestCtrl($scope) {
$scope.persons = [{"id": 1, "name": "Diso"}, {"id": 2, "name": "Tatalop"}];
$scope.job = $scope.persons[1].id;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div ng-app="myApp" ng-controller="TestCtrl">
<select name="person" ng-options="person.id as person.name for person in persons" ng-model="job">
<option value="">Select a Person</option>
</select>
this is the selected id: {{job}}
<div>
关于javascript - AngularJS 下拉菜单 - 自动选择不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31240917/