Question

如果列表中没有选项被选中，或者列表中没有选定的类，我想禁用添加按钮。

HTML：

<div ng-repeat="json in myJson" ng-class="{'selected': json.selected}" ng-model="selectionOptions" ng-click="selectItem($index)">
  {{json.title}}
</div>
<button ng-disabled="hideAdd">Add</button>

我试过了：

 $scope.$watch('selectionOptions', function(val) {
    if(angular.element('selectionOptions').hasClass('selected')) {
        $scope.hideAdd = false;
    } else {
        $scope.hideAdd = true;
    }
  });

JSFiddle Demo

Answer 1

无需指令或$ watch。

删除ng-model，因为它什么都不做。即使它确实有效，每个项目也会绑定到同一个变量。

使用ng-click调用$scope上的某个功能，该功能可切换所选值，并从所选选项列表中添加/删除该功能。

您可以使用ng-show="selectedOptions.length"隐藏/显示添加按钮。

angular.module('app', []).controller('mainCtrl', function($scope) {
  $scope.myJson = [{
    title: 'test1',
    selected: false
  }, {
    title: 'test2',
    selected: true
  }, {
    title: 'test3',
    selected: false
  }, {
    title: 'test4',
    selected: false
  }];

  // Initialize array with already selected options
  $scope.selectedOptions = $scope.myJson.filter(function(item) {
    return item.selected;
  });

  $scope.toggle = function(item) {
    // Toggle selected
    item.selected = !item.selected;

    // Add it to list
    if (item.selected) {
      $scope.selectedOptions.push(item);
    } else {
      // Remove it from list
      $scope.selectedOptions.splice($scope.selectedOptions.indexOf(item), 1);
    }
  };
});

.selected {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='mainCtrl'>
  <div app-click="">
    <div ng-repeat="json in myJson" ng-click="toggle(json)" ng-class="{'selected': json.selected}">
      {{json.title}}
    </div>
    <button ng-show="selectedOptions.length">Add</button>
  </div>

  <br/>Selected options: <pre>{{selectedOptions | json}}</pre>
</div>

Answer 2

我认为你不能在这里使用ng-model，因为没有输入。您可以观看json，也可以使用过滤器来确定是否有任何选定的元素。后者的例子：

 .directive('appClick', function() {
  return {
    restrict: 'A',
    scope: true,
    controller: function($scope, $element) {
      optionIsSelected();

      function optionIsSelected() {
        $scope.hideAdd = $scope.myJson.filter(function(el) {
          return el.selected
        }).length === 0;
      }

      $scope.selectItem = function(index) {
        $scope.myJson[index].selected = !($scope.myJson[index].selected);
        optionIsSelected();
      };
    }
  }
}

<强> Working fiddle

如果没有选择angularJS选项，则禁用按钮

2 个答案: