角度js切換事件不能正常工作

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

正如你可以看到運行的代碼片段， 角作品很好...

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>