javascript - 如果没有选择任何选项，则禁用按钮angularJS

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 因为它什么都不做。即使它确实有效，每个项目也会绑定(bind)到同一个变量。

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