在 angularJS select 指令中设置所选项目

我在 Angular 的 select 指令中设置所选项目时遇到问题。我不知道这是一个bug还是Angular的设计者有意识的设计。但它确实使 select 指令的用处大大降低。

描述：

我的应用程序与 REST API 通信以从数据库接收实体。 API 规定对象的关系仅与 ID 属性一起发送，以便您可以在需要时在后续请求中检索它们。

Example:

{ id : 1, customerName : "some name", city : {id : 12}} 

其中 city 是另一个实体，可以使用城市 ID 通过不同的 REST 端点进行检索，如下所示：

{ id: 12, name : "New York"}

我需要创建一个表单来编辑客户实体，其中包含包含所有可能城市的下拉菜单，以便用户可以从列表中选择适当的城市。该列表最初必须显示从 JSON 对象检索到的客户所在城市。

表格如下所示：

 <form>
  <input type="text" ng-model="customer.name"/>
  <select ng-model="customer.city" ng-options="i as i.name for i in cities"></select>
 </form> 

控制器看起来像这样：

app.controller('MainCtrl', function ($scope, $http) {
    $http.get(serviceurl + 'admin/rest/customer/' + id + "/", {
        params: {"accept": "json"},
        withCredentials: true
    }).then(function (response) {
                $scope.customer = response.data.item;
            });
    $http.get(serviceurl + 'admin/rest/city/', {
        params: {"accept": "json"},
        withCredentials: true
    }).then(function (response) {
                $scope.cities = response.data.items;
                // THIS LINE LOADS THE ACTUAL DATA FROM JSON
                $scope.customer.city = $scope.findCity($scope.customer.city);
            });
    $scope.findCity = function (city) {
        for (var i = 0; i < $scope.cities.length; i++) {
            if ($scope.cities[i].id == city.id) {
                return $scope.cities[i];
            }
        }
    }
});

应该发生什么： 一旦加载了 City 对象的完整详细信息，select 指令必须将加载的城市设置为列表中的选定项目。

会发生什么： 该列表显示一个空项目，如果所选项目来自项目数组之外的对象，则无法初始化所选项目。

该问题的DEMO在这里：http://plnkr.co/edit/NavukDb34mjjnQOP4HE9?p=preview http://plnkr.co/edit/NavukDb34mjjnQOP4HE9?p=preview

有解决办法吗？是否可以以通用方式以编程方式设置所选项目，以便将 AJAX 调用和选择逻辑重构为可重用的基于 AJAX 的选择小部件？

就这么简单

<select
    ng-model="item"
    ng-options="item.name for item in items track by item.name">

然后在你的控制器内部：

// all items
$scope.items = [{name: 'a'}, {name: 'b'}, {name: 'c'}];
// set the active one
$scope.item = {name: 'b'};
// or just
$scope.item = $scope.items[1]

查看http://docs.angularjs.org/api/ng.directive:select http://docs.angularjs.org/api/ng.directive:select从那里：

轨迹表达式：在处理对象数组时使用。该表达式的结果将用于标识数组中的对象。 trackexpr 最有可能引用值变量（例如 value.propertyName）。

剩下的就是给$scope.item变量和角度将通过检查项目的值来确定应将哪个元素设置为活动元素name财产。