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。

展开和打开折叠取决于角度值

2 个答案: