0

崩壊の1つを開くことができる条件付きの状況をどのように達成できるのだろうか。国が CZ の場合、折りたたみ 1 を開きたいとします。それ以外の国が USA の場合、折りたたみ 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;
  });

私はそれを行う正しい方法が何であるかに本当に興味があります。私のコードは現在、正しいことを実行していないためです。助言がありますか？

プランカー: http://plnkr.co/edit/5l0lEC8oeTLy0ZL8XKO4?p=preview

4

2 に答える 2

3

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

于 2013-08-07T22:22:17.710 に答える
0

ngClassまたはngSwitch ディレクティブのいずれかを使用して、目的の結果を得ることができます。参照ドキュメントには、その使用法を示す詳細な例があります。

コントローラから DOM を操作または参照しないでください。DOM 操作はディレクティブに制限する必要があります。

于 2013-08-07T22:20:11.167 に答える