ng-repeat 中的自定义指令中的 AngularJS ng-options [英] AngularJS ng-options inside custom directive which is inside ng-repeat
问题描述
你能帮我找到一种方法来设置和获取放置在我的自定义指令中的选择元素值吗.
这就是我所拥有的:
<div ng-controller="MyCtrl"><div ng-repeat="类别中的类别">{{分类名称}}:<status-selector items="statuses" ng-model="selectedStates[status.Id]"></status-selector>我有两个数组:类别和状态.每个类别都可以有自己的状态.When a status for a category is chosen, it should be saved to selectedStatus to finally have something like [{CategoryId:1,StatusId:2},{CategoryId:2,StatusId:3}].如果 selectedStatus 已经初始化，我想查看相应类别的选择状态，这意味着我还需要输入值，而不仅仅是读取它们.
myApp.controller("MyCtrl", function($scope) {$scope.categories = [{Id:1, Name: "Category1"}, {Id: 2, Name: "Category2"}];$scope.statuses = [{Id: 1, Name: "Low"}, {Id: 2, Name: "Normal"}, {Id: 3, Name: "High"}]$scope.selectedStates = {};}).directive('statusSelector', function() {返回 {限制:'E'，替换:真的，范围:{ 项目:'='，ngModel:'='}，模板:'<span><select class="select" ng-options="obj.Id as obj.Name for obj in items" ng-model="ngModel"></select></span>',链接:函数(范围，元素，属性){}}});谢谢.
演示:小提琴
你应该有你自己的类别模型 ng-model.这可能更有意义.
设置状态，只需将Status填入JSON即可.
//....controller("MyCtrl", function($scope) {$scope.categories = [{Id:1, Name: "Category1", Status: 1}, {Id: 2, Name: "Category2"}];//...显然，要获取用户的选择，只需获取 category.Status 属性.这是更新的小提琴.
另外，只是一个小贴士.您似乎来自 .Net 背景，在那里您习惯了 Pascal 案例.在 javascript 中，使用驼峰式大小写是常识，因此您将使用 {id: ..., status: ...} 而不是 {Id: ...,状态:...}.
Could you help me to find a way to set and get select element values which are placed inside my custom directive.
This is what I have:
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="category in categories">
{{category.Name}}:
<status-selector items="statuses" ng-model="selectedStates[status.Id]"></status-selector>
</div>
</div>
</body>
I have two arrays: categories and statuses. Each category can have its own status. When a status for a category is chosen, it should be saved to selectedStatus to finally have something like [{CategoryId:1,StatusId:2},{CategoryId:2,StatusId:3}]. In case if selectedStatus was already initialized, I would like to see chosen statuses for corresponding categories, means that I also need to put values, not just read them.
myApp
.controller("MyCtrl", function($scope) {
$scope.categories = [{Id:1, Name: "Category1"}, {Id: 2, Name: "Category2"}];
$scope.statuses = [{Id: 1, Name: "Low"}, {Id: 2, Name: "Normal"}, {Id: 3, Name: "High"}]
$scope.selectedStates = {};
})
.directive('statusSelector', function() {
return {
restrict: 'E',
replace: true,
scope: { items: '=', ngModel: '='},
template: '<span><select class="select" ng-options="obj.Id as obj.Name for obj in items" ng-model="ngModel"></select></span>',
link: function(scope, element, attrs) {
}
}
});
Thank you.
Demo: Fiddle
You should have your own category model as ng-model. It probably make more sense.
<status-selector items="statuses" ng-model="category.Status"></status-selector>
To set the status, just bring the Status filled in the JSON.
// ...
.controller("MyCtrl", function($scope) {
$scope.categories = [{Id:1, Name: "Category1", Status: 1}, {Id: 2, Name: "Category2"}];
// ...
Obviouslly, to get user's selection, just grab the category.Status property. Here's the updated fiddle.
Also, just a side tip. You seem to come from a .Net background, where you're used to Pascal case. In javascript, it's common sense to use camel case, instead, so you'd have {id: ..., status: ...} instead of {Id: ..., Status: ...}.
这篇关于ng-repeat 中的自定义指令中的 AngularJS ng-options的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
