expand и open collapse зависят от значения углового

Question

Мне интересно, как вы можете достичь условной ситуации, которая может открыть один из краха. Скажем, у меня есть какое-то значение, если страна CZ, я хочу открыть коллапс 1, в противном случае, если страна США, он должен открыть коллапс 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> 

Здесь контроллер

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

Мне действительно интересно, что будет правильным способом сделать это. Потому что мой код в настоящее время не выполняет правильную вещь. Какие-либо предложения?

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

Answer 1

Вы можете использовать ng-switch. Пожалуйста, взгляните на демо.

<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

Answer 2

Вы можете достичь желаемого результата с любой ngClass или ngSwitch directive. В справочной документации приведены подробные примеры их использования.

Вы не должны манипулировать или ссылаться на DOM с контроллера. DOM-манипуляция должна быть ограничена directives.