Angular js Toggle Event funktioniert nicht richtig

Question

Mein Toggle funktioniert gut, aber wenn ich erneut auf die Schaltfläche klicke, wird nicht alles zurückgesetzt. Die geöffnete Registerkarte bleibt geöffnet oder geschlossen (wenn sie geschlossen ist). Es verhält sich so, als ob es nicht auf seine ursprüngliche Form zurückgesetzt werden möchte. Kann mir jemand vorschlagen, was ich falsch mache, bitte

  <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

Wie Sie den Code-Schnipsel laufen sehen können, Winkel funktioniert gut ...

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}) 
 
)) 
 
;

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

 
.cbox { 
 
    background: lightcoral; 
 
}

<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>