javascript - 当对象中的所有变量都为假时，AngularJs 禁用按钮

Question

我有一个可以点击的按钮列表。当没有选择任何按钮时，我想在其他地方禁用一个按钮。

这是按钮，类是从此代码添加的 -

<button type="button" ng-repeat="service in services_data track by service.id" ng-class="showDetails[service.id] ? 'bg-success': 'bg-default'" ng-init="selected[service.id] = false" ng-click="showDetails[service.id] = showDetails[service.id]; select_check(showDetails)" class="list-group-item item_buttons">
  <ul class="list-unstyled">
     <li>{{service.name}} - {{service.est_time_mins}} mins. | ${{service.price}}</li>
     <li>{{service.style}}</li>
  </ul>
</button>

单击按钮时，它会触发一个切换变量“showDetails”...当按钮被选中时返回 TRUE，如果取消选择则返回 FALSE。

所以当所有按钮都处于 FALSEy 状态时，我希望禁用一个按钮。

那么，我可以编写一个函数来检查每个按钮的 showDetails 变量吗？

尝试了一堆带有循环的东西，遍历每个按钮和一些 if/elses，但我无法让任何东西正常工作，即使真的关闭。

Answer 1

我写了一段代码可以帮助你:

http://jsfiddle.net/k3bzcadx/2/

HTML:

<div ng-controller="MyCtrl">
<button type="button" ng-repeat="service in servicesData" ng-class="{'bg-success': service.selected, 'bg-default': !service.selected}" ng-click="service.selected = !service.selected" class="list-group-item item_buttons">
  <ul class="list-unstyled">
     <li>{{service.name}} - {{service.est_time_mins}} mins. | ${{service.price}}</li>
     <li>{{service.style}}</li>
  </ul>
</button>

<br>
<button class="another-button" ng-disabled="disableAnotherButton">ANOTHER BUTTON!</button>

JS:

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

        $scope.disableAnotherButton = false;

    $scope.servicesData = [
        {
        id: 1,
        name: 'Button A',
        price: 1000,
            selected: false
        },{
        id: 2,
        name: 'Button B',
        price: 2000,
            selected: false
        }
   ];

   $scope.$watch('servicesData', function(newServicesData){
      $scope.disableAnotherButton = newServicesData.every(elem => elem.selected == true); 
   }, true);

}

(更新)

你也可以在单独的数组中处理逻辑

http://jsfiddle.net/k3bzcadx/3/

(更新 2)

没有 ECMAScript 2015 语法

http://jsfiddle.net/k3bzcadx/5/