设置所选项目angularJS选择指令(Setting the selected item in a

我有设定角度的选择指令所选择的项目有问题。 我不知道这是否是一个错误或角设计师有意识的设计。 这肯定让选择指令少了很多有用的，。

描述：

我的应用程序与REST API进行通信，以接收数据库中的实体。 该API决定了对象的关系与ID属性只发送，这样你可以根据需要在后续请求检索。

例：

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

其中，城市是可以通过不同的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];
            }
        }
    }
});

应该发生什么：一旦市物体的全部细节加载的选择指令必须设置加载在列表中选择项目的城市。

会发生什么：列表中会显示一个空项目，有没有办法来初始化所选择的项目，如果从项目的阵列外的物体所选择的项目。

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

是否有这样的解决方案？ 可以选择的项目可以在通用的方式编程设置，使得AJAX调用和选择逻辑被重构到一个可重复使用的基于AJAX控件选择？

Answer 1:

它是如此简单

<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：有对象的数组工作时使用。 此表达式的结果将被用来识别所述阵列中的对象。 该trackexpr将最有可能参考值变量（如value.propertyName）。

剩下的只是分配一个值到$scope.item变量和角度会找出哪些元素应该通过检查项目的设置为活动name属性。

Answer 2:

它不工作的原因是角期望对象的引用是相等的。 在你的情况（在你plnkr“从对象选择”）创建一个新的对象，尽管有相同的属性。 然而，角度可以不知道两个不同的对象表示相同的对象。 您至少有两种方法：

找到正确的城市对象实例

相反设置的$scope.customer.city到一个新的对象，找到从我市实际对象$scope.cities阵列。 如果您使用UnderscoreJs你可以这样做：

$scope.customer.city = _.find($scope.cities, function (city) {
    return city.id === theCustomersCity.id;
});

结合城市ID而不是城市对象

另一种方法，这可能是更容易，是改变ng-model和ng-options指示要匹配的ID，而不是对象。 见工作示例这里 。

<select ng-model="customer.cityId" ng-options="i.id as i.name for i in cities"></select>

Answer 3:

我来到翻过了同样的问题。 我的选项和建模的数据均来自单独的API调用来了。

相反，通过使用对象键NG-模型添加了一个间接层，我最后写一个使用“代理”变量的简单指令。

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

变

<select ng-model="customer_cityProxy" ng-options="i.name as i.name for i in cities"></select>

使用上customer.city和customer_cityProxy一个$手表，我得到预期的行为。

还有一些缺点，就在于它只有在键是脱节的作品。

代码可以在这里找到： https://github.com/gosusnp/options-proxy

Answer 4:

看看http://configit.github.io/ngyn/#select_extensions这个解决方案为我

文章来源: Setting the selected item in angularJS select directive