當對象中的所有變量都爲假時，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變量嗎？

嘗試了一堆循環的東西，循環每個按鈕和一些如果/ 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); 

} 

（UPDATE）

也可以處理在一個單獨的數組

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

（更新2）

如果沒有2015年的ECMAScript語法

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

Answer 2

試試這個邏輯...放置以下功能在腳本中。這將擴展JavaScript的數組原型

Array.prototype.all = function (fn) { 
    var b = true; 
    var arr = this; 
    fn = fn || function (i) {return true}; 
    arr.forEach(function (item) { 
     if (fn(item) == false) b = false; 
    }); 
    return b; 
} 

下一步，將以此爲按鈕要禁用基於條件

<button class="other-button" ng-disabled="services_data.all((service) => showDetails[service.id])">OTHER BUTTON</button> 
<!--If your browser supports ECMA SCRIPT 6, i guess 

還是要安全？

<button class="other-button" ng-disabled="services_data.all(function (service) { return showDetails[service.id] })">OTHER BUTTON</button> 
<!--If your browser does NOT support ECMA SCRIPT 6