Angular js toggle event is not working correctly

Question

My toggle works fine but when I click the button again it will not reset all. The tab which is open will stay open or close (if it's close). It is behaving like it doesn't want to reset to its original form. Can someone suggest me what I am doing wrong, please

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

This is because `ng-repeat` create a prototypically inherited child scope, you could solve this problem by either using `Dot Rule` or `controllerAs` pattern, I'll recommend to read [this answer](https://stackoverflow.com/a/38275584/2435473) — Pankaj Parkar, Aug 23 '17 at 15:56
Thats interesting @PankajParkar. I will to follow the thread for information. thank you, hopefully can solve my problem thanks for guidence — danny, Aug 23 '17 at 16:00

Hitmands · Accepted Answer · 2017-08-24T08:26:56.893

-1

As you can see running the code snippet, angular works fine...

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>

edited Aug 24 '17 at 08:26

answered Aug 23 '17 at 15:50

Hitmands

13,491
4
34
69

I already have that function working just fine. The issue is occuring when its two more in card to reseting its value to origin – danny Aug 23 '17 at 15:59
Ok this is my what my code is doing. Now if you put one more toggle have all toggle to reset its value and restore it will not work – danny Aug 23 '17 at 16:08
As you can see, you can perform any action... angular works just fine. – Hitmands Aug 23 '17 at 16:12
unselect toggle 2 click on toggle all cards it will fail this is wat exactly doing to my code. Its not reseting to all card even though which were close – danny Aug 23 '17 at 16:46
it doesn't fail, `toggle` just swaps `true => false` and `false => true`, so, it does what expected... are you may looking for `collapseAll` behaviour? – Hitmands Aug 23 '17 at 16:48
yes. even though if someone hide one toggle when they press one button it should expand all or collapse all with one button reseting everything – danny Aug 23 '17 at 16:50
if you are looking for any checkbox-like behaviour, please, have a look at my last edit (red button). – Hitmands Aug 23 '17 at 16:54
this is perfectly what I was looking for solution just have to learn to implement same thing in my code. Can you give me some suggestion inside my code please. – danny Aug 23 '17 at 16:56
if that suits, please revert back your downvote. We cannot give you more information as you didn't provide enough context related data about your implementation. In any case, just try to understand what's the logic behind `$rootScope.checkboxStyleBehaviour` method, which is different from a normal toggle behaviour. – Hitmands Aug 23 '17 at 16:59
I did not down vote your answer bud. Thanks this is somewhere for me to start to. i really appreciate your help. I am going to give you best Answer. This can be helpfull to many people in future – danny Aug 23 '17 at 17:01
Never encourage to use `$rootScope` since [its antipattern](https://github.com/btilford/anti-patterns/blob/master/angular/Angular.md#data-sharing) @Hitmands, I don't generally downvote your answers, I'm happy to upvote if you are ready to improve answer. Even I don't see you cover core part of the problem. – Pankaj Parkar Aug 23 '17 at 17:10
@Pankaj $rootScope was used just for an example, the main part was regarding methods. What the core part of the question I didn't cover? – Hitmands Aug 24 '17 at 08:28

Angular js toggle event is not working correctly

1 Answers1