Question

我有一个引导主题的角度应用程序，它有2个单选按钮，可以显示单独的页面。两者都不能同时被选中。如果选择了一个，我希望btn btn-primary active是类值，而另一个未选中的类具有类属性btn btn-secondary。

我花了几个小时谷歌搜索和玩弄不同的东西，没有任何工作。到目前为止Here's the plunker我的尝试。知道我做错了吗？

Answer 1

关闭的一些事情 -

您没有包含AngularJS 。当然它不会运行，它根本就不存在......
你试图以错误的方式使用ng-class作为一个类。除了使用ng-class 属性通常更容易*之外，您的格式错误。您有ng-class=!view.isSelected ? 'btn-primary active' : 'btn-secondary'，应为ng-class:!view.isSelected ? 'btn-primary active' : 'btn-secondary'。请注意:而不是=符号。

*这并不是说您无法使用class版ng-class（这绝对有效），但我通常会区分class属性中的静态类，以及ng-class中的任何动态类。
你没有控制器。虽然从技术上讲，你可以使视图真实地＃34;通过否定undefined（这是一种非常草率的方式）创建一个范围变量，这最多允许你有一个二进制/切换无线电设置，或一组相互允许的切换。您应该在控制器中，一个范围变量，用于保存按下哪个按钮（每个按钮将其设置为单击以显示它现在的某个按钮），并且{{1}为此进行评估。

Answer 2

您的plunker演示中的

没有使用bootstrap来使用课程btn btn-primary btn-secondary，因此请添加bootstrap链接。

和ng -class的无效表达式。应该使用

class="btn" ng-class="button.view1Selected ? 'btn-primary active' : 'btn-secondary'"

insted of

class="btn ng-class:button.view1Selected ? 'btn-primary active' : 'btn-secondary'"

最好使用数组来存储所有最初为false的选定属性的视图按钮信息。

像： $scope.views = [{isSelected: false},{isSelected: false}]; //第一个按钮的索引为0 ...或者可以根据需要为特定属性

当点击任何按钮然后设置该按钮并根据你的条件设置类。调用一个函数来设置特定的按钮激活标记。

喜欢：ng-click="selectedButton(1)"

并检查如下设置类：ng-class="views[0].isSelected ? 'btn-primary active' : 'btn-secondary'"

selectedButton的功能如下：

$scope.selectedButton = function(viewIndex){
    angular.forEach($scope.views, function(view, index) {
      if(viewIndex == index) {
        view.isSelected = ! view.isSelected;
      } else {
        view.isSelected = false;
      }
    });
  };

See Plunker Demo

角度切换按钮

2 个答案: