当对象中的所有变量都为false时，AngularJs禁用按钮-Java 学习之路

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

这是按钮，从这段代码中添加了类 -

<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但是我甚至无法正常工作 .

2 回答

试试这个......在脚本中放置以下函数 . 它将扩展JavaScript Array Prototype

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

回复于 2024-05-02T14:05:23+08:00

我写了一个代码来帮助你：

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）

没有ECMAScript 2015语法

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

回复于 2024-05-02T14:05:23+08:00

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

2 回答

相关问题