펼치기 및 열림 축소가 값에 따라 달라집니다.

Question

나는 붕괴 중 하나를 열 수있는 조건부 상황을 어떻게 달성 할 수 있는지 궁금합니다. 말, 나는 나라 CZ 경우, 나는이 나라가 미국의 경우 다른, 그것은 붕괴 여기에 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> 

열립니다 붕괴를 열려면 1 컨트롤러입니다 원하는 어떤 값을 가지고

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으로 제한되어야합니다.