如果没有选择任何选项，则禁用按钮答案

【问题标题】：disable button if none of the options are selected angularJS如果没有选择任何选项，则禁用按钮
【发布时间】：2016-12-22 21:24:31
【问题描述】：

如果列表中没有选择任何选项或者列表中没有所选的类，我想禁用添加按钮。

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

【问题讨论】：

标签： javascript html angularjs angularjs-directive scope

【解决方案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>

【讨论】：

为什么一定要添加到列表中？
@user4756836 您需要维护selectedOptions 的列表，以便在至少有一个选定选项时隐藏/显示“添加”按钮。您无法使用ng-model 将元素绑定到数组，因此您需要在单击该项目时添加或删除该项目。如果你不把它添加到列表中，你将不知道有多少被选中的项目。

【解决方案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

【讨论】：