2013-03-23 123 views
1

你能帮我找到一种方法来设置和获取它放在我的自定义指令中选择元素的值。AngularJS NG选项这里面NG-重复

这是我有:

<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> 

我有两个数组:类别和状态。每个类别都可以有自己的状态。当选择一个类别状态,它应该被保存到selectedStatus终于可以像[{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() { 
    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) { 
     } 
    } 
}); 

谢谢。

演示:Fiddle

+0

谢谢阿伦P佐尼。您在Fiddle的演示帮助我了解问题出在[status.Id]中,我必须使用[category.Id]。谢谢! – Antipod 2013-03-23 06:11:34

回答

3

你应该有自己的分类模型为ng-model。这可能更有意义。

<status-selector items="statuses" ng-model="category.Status"></status-selector> 

要设置状态,只需将Status填入JSON。

// ... 
.controller("MyCtrl", function($scope) { 
    $scope.categories = [{Id:1, Name: "Category1", Status: 1}, {Id: 2, Name: "Category2"}]; 
// ... 

很明显,要获得用户的选择,只需抓住category.Status属性。这是updated fiddle

而且,只是侧尖端。你似乎来自.Net背景,在那里你习惯了帕斯卡的情况。在JavaScript中,它是用骆驼常识,而不是,所以你必须{id: ..., status: ...}而不是{Id: ..., Status: ...}