AngularJS 下拉 - 自动 select 不工作

Question

在控制器中

$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。这是完美的工作。

在更新页面 我想使用相同的代码（相同的控制器和相同的 html 文件）。此下拉菜单现在需要自动 select。假设当页面加载下降时应该自动 select 第二个人。为了让它成功，我在控制器中写了 $scope.job.person_id = $scope.persons[1];。

现在的问题是，如果我从 ng-options 中删除 person.id as，那么只有自动 select 功能起作用，否则它不起作用。现在，如果我删除 person_id as 然后我得到整个对象 ({"id": 2, "name": "Tatalop"}) 作为下拉的结果。但我只想要 id.

这个人

怎么做？我错过了什么吗？任何人都可以给我建议吗？

Answer 1

看这个例子：http://jsfiddle.net/kevalbhatt18/gfbksn8L/1/

在 ng-change 函数中我只得到 id。

var myApp = angular.module('myApp', []); function MainCtrl($scope) { $scope.persons = [{"id": 1, "name": "Diso"}, {"id": 2, "name": "Tatalop"}]; $scope.person_id = $scope.persons[1].id; $scope.getValue = function(t){ console.log(t) } }

Answer 2

请检查此 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>

AngularJS 下拉 - 自动 select 不工作

AngularJS drop down - auto select not working

javascript

angularjs

ng-options