Angular js toggle事件无法正常工作

Question

我的切换工作正常，但当我再次点击该按钮时，它不会全部重置。打开的标签将保持打开或关闭（如果它关闭）。它的行为就像它不想重置为原始形式。有人可以告诉我我做错了吗，请

           <md-card>
            <md-card-content>
                <button ng-click="Custom()">Cick Here</button>
                <div>
                    <div ng-repeat="search in vm.searchResults">
                        <md-card ng-click="callaction=!callaction">
                            <md-card-content>
                                <br />
                              <div ng-repeat="sponsor in search.scp">
                                    <div ng-repeat="cin in sponsor.ci">
                                        <div ng-repeat="po in cin.po" >
                                            <p></p>
                                            <span>  {{sponsor.Name }}</span>
                                            <span ng-repeat="prod in po.prods">
                                                <img ng-src="{{img/cc2.ico}}">
                                            </span>
                                            <md-list>
                                                <md-list-item ng-hide="callaction">
                                                    <div class="outside">
                                                        <div ng-repeat="delivery in po.deliveryAddresses" class='extra divInner'>
                                                            {{delivery.PracticeName}} <br /> <span ng-show="delivery.LineTwo">{{ delivery.LineTwo}}
                                                        </div>
                                                    </div>

                                                </md-list-item>
                                            </md-list>
                                        </div>
                                    </div>
                                </div>
                            </md-card-content>
                        </md-card>
                    </div>
                </div>
            </md-card-content>
        </md-card>

Javascript

 $scope.callaction = true;
 $scope.Custom = function () {
     $scope.callaction = !$scope.callaction;
 };

Answer 1

正如您所看到的，运行代码段， 角度很好......

＆＃13;

＆＃13;

function TestCtrl($scope, cards) {
  var vm = $scope;
  
  vm.cards = cards;
  
  vm.collapseCard = function(card) {
    card.callaction = false; 
  };
  
  vm.expandCard = function(card) {
    card.callaction = true; 
  };
  
  vm.Custom = function(event, card) {
    card.callaction
      ? vm.collapseCard(card)
      : vm.expandCard(card)
    ;
  };
  
  vm.collapseAll = function(event) {
    vm.cards.forEach(vm.collapseCard);
  }; 
  
  vm.expandAll = function(event) {
    vm.cards.forEach(vm.expandCard);
  }; 
  
  vm.toggleAll = function(event) {
    vm.cards.forEach(function(card) {
      vm.Custom(event, card);  
    });
  };

  vm.checkboxStyleBehaviour = function(event) {
    var someCollapsed = vm.cards.some(
      function(card) { return card.callaction === false; }
    );
    
    if(/* there are */ someCollapsed /* cards left */) {
      return vm.expandAll();
    }
    
    return vm.collapseAll();
  };
}


angular
  .module('test', [])
  .controller('TestCtrl', TestCtrl)
  .constant('cards', Array.from({length: 20}, 
    (_, i) => ({id: ++i, callaction: true}) 
  ))
;

＆＃13;

.toggle-disabled {
  visibility: hidden;
}
button {
  margin-right: 5px;
}

.cbox {
  background: lightcoral;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="test">
<div ng-controller="TestCtrl">


  <button ng-click="expandAll($event)">Expand All Cards</button>
  <button ng-click="collapseAll($event)">Collapse All Cards</button>
  <button ng-click="toggleAll($event)">Toggle All Cards</button>
  <button ng-click="checkboxStyleBehaviour($event)" class="cbox">Checkbox Style?</button>
  <hr />
  <hr />

  <div ng-repeat="card in cards track by $index">
    <button ng-click="Custom($event, card)">Toggle</button> <strong ng-class="{false: 'toggle-disabled'}[card.callaction]">
      {{card.id}} - I Am Active
    </strong>
    <hr />
  </div>


</div>
</section>

＆＃13;

＆＃13;

＆＃13;