设置所选项目angularJS选择指令 [英] Setting the selected item in angularJS select directive
问题描述
我有设置在角的选择指令中所选项目的问题。我不知道这是否是一个错误或角设计师有意识的设计。这肯定让选择指令少了很多有用的，
I have a problem with setting the selected item in angular's select directive. I don't know if this is a bug or a conscious design from the designers of angular. It sure makes the select directive a lot less useful though.
说明：
我的应用程序与REST API通信，以便从数据库中获得的实体。该API决定了对象的关系与ID属性只发送，这样你可以根据需要在后续请求检索。
My app communicates with a REST API to receive an entity from the database. The API dictates that relations of the object are sent with an ID property only so that you can retrieve them in subsequent requests if needed.
例如：
{ id : 1, customerName : "some name", city : {id : 12}}
，其中城市是可以通过不同的REST端点使用城市标识进行检索，看起来像这样的另一个实体：
where city is another entity that can be retrieved through a different REST endpoint using the city id and looks like so:
{ id: 12, name : "New York"}
我需要创建一个表单与所有可能的城市的一个下拉菜单编辑客户实体，使用户可以从列表中选择了恰当的城市。从JSON对象检索列表必须首先显示客户所在的城市。
I need to create a form to edit the customer entity with a dropdown menu with all possible cities so that the user can select the appopriate city from the list. The list must initially display the customer's city as retrieved from the JSON object.
的形式如下：
<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];
}
}
}
});
应该发生什么：
一旦市物体的全部细节加载的选择指令必须设置被加载在列表中选择项目的城市。
What should happen: once the full details of the City object are loaded the select directive must set the city that was loaded as the selected item in the list.
会发生什么：
列表中显示一个空项目，有没有办法，如果所选项目从项目的数组之外的对象初始化选定的项目。
What happens: the list displays an empty item and there's no way to initialize the selected item if the selected item from objects outside the array of items.
这里的问题的DEMO：<一href=\"http://plnkr.co/edit/NavukDb34mjjnQOP4HE9?p=$p$pview\">http://plnkr.co/edit/NavukDb34mjjnQOP4HE9?p=$p$pview
DEMO of the issue here: http://plnkr.co/edit/NavukDb34mjjnQOP4HE9?p=preview
是否有这样的解决方案？可以选择的项目是一个通用的方法编程设置，使得AJAX调用和选择逻辑被重构到一个可重用的基于AJAX部件选择？
Is there a solutions for this? Can the selected item be set programmatically in a generic way so that the AJAX calls and select logic be refactored into a reusable AJAX based select widget ?
推荐答案
这是如此简单
<select
ng-model="item"
ng-options="item.name for item in items track by item.name">
然后你控制器中：
Then inside you controller:
// 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]
退房的<一个href=\"http://docs.angularjs.org/api/ng.directive:select\">http://docs.angularjs.org/api/ng.directive:select
从那里：
trackexpr ：使用对象数组时使用。这个前pression的结果将被用来识别所述阵列中的对象。该trackexpr将最有可能引用变量的值（例如value.propertyName）。
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 变量和角度会找出通过检查项目的<$ C $哪些元素应该设置为活动C>名称属性。
The rest is just assigning a value to the $scope.item variable and angular will figure out which element should be set as active by checking the item's name property.
这篇关于设置所选项目angularJS选择指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
