CODEWITHSUNDEEP
twitter-bootstrapangularjsangularjs-directive
user1851359
user1851359

Reputation: 139

expand and open collapse depend on the value angular

I am wonder how you can achieve a conditional situation that able to open one of the collapse. Say, I got some value, if country is CZ, I want to open collapse 1, else if country is USA, it should open collapse 2. 

   <div ng-controller="CollapseDemoCtrl">
<button class="btn" id="btn" ng-click="isCollapsed = !isCollapsed">CZ</button>
<hr>
<div collapse="isCollapsed">
    <div>CZ</div> 
</div>
  </div>

   <div ng-controller="CollapseDemoCtrl">
<button class="btn" id="btn" ng-click="isCollapsed = !isCollapsed">USA</button>
<hr>
<div collapse="isCollapsed">
    <div> USA</div> 
</div>
  </div>

Here is the controller

  var app = angular.module('app', ['ui.bootstrap']);

  app.controller('CollapseDemoCtrl', function($scope) {
  $scope.isCollapsed = true;

  //not working code from here
  $scope.values = $document.getElementbyId('btn').innerHTML;
  if($scope.values==1)
  $scope.isCollaspe=false;
  });

I am really curious of what will the correct way to do it. Because my code currently does not perform the correct thing. Any suggestions?

plunker: http://plnkr.co/edit/5l0lEC8oeTLy0ZL8XKO4?p=preview

Upvotes: 0

Views: 2047

Answers (2)

Baradzed
Baradzed

Reputation: 578

You may achieve desired result with either ngClass or ngSwitch directive. The referenced documentation has detailed examples showing their usage.

You should not manipulate or reference DOM from a controller. DOM manipulation should be restricted to directives.

Upvotes: 0

zs2020
zs2020

Reputation: 54514

You can use ng-switch. Please take a look at the demo.

<div ng-controller="CollapseDemoCtrl">
    <button class="btn" id="btn" ng-click="clicked ='CZ'">CZ</button>
    <button class="btn" id="btn" ng-click="clicked ='USA'">USA</button>
    <hr>
    <div ng-switch="clicked">
        <div ng-switch-when="CZ">
            <div class="well well-large">Some content CZ</div>
        </div>
        <hr>
        <div ng-switch-when="USA">
            <div class="well well-large">Some content USA</div>
        </div>
    </div>
</div>

Demo

Upvotes: 3

Related Questions