Question

你能帮我找到一种方法来设置和获取置于我的自定义指令中的选择元素值。

这就是我所拥有的：

 <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

Answer 1

您应该拥有自己的类别模型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背景，你已经习惯了Pascal案例。在javascript中，使用驼峰大小写是常识，因此您需要{id: ..., status: ...}而不是{Id: ..., Status: ...}。

自定义指令内的AngularJS ng-options，位于ng-repeat内

1 个答案: