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

在角度的select指令中设置所选项目时出现问题。我不知道这是一个错误还是设计师有意识的设计。它确实使选择指令不太有用。

描述：

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

例：

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

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

{ 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/',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];
            }
        }
    }
});

应该怎么办
一旦城市对象的完整详细信息被加载，则select指令必须设置列表中所选项目加载的城市。

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

演讲的这个问题在这里：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
从那里：

trackexpr: Used when working with an array of objects. The result of this expression will be used to identify the objects in the array. The trackexpr will most likely refer to the value variable (e.g. value.propertyName).

其余的只是为$ scope.item变量分配一个值，而角度将通过检查项目的名称属性来确定应该将哪个元素设置为活动。

原文地址：https://www.jb51.cc/angularjs/144512.html

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

相关推荐