如何在 ng-repeat 中添加类答案

【问题标题】：How to addClass in ng-repeat如何在 ng-repeat 中添加类
【发布时间】：2014-12-02 23:22:11
【问题描述】：

这是我的 Html 代码：

<div ng-controller="MainController">
  <ul class="list-holder">
     <li ng-repeat="check in checks" ng-class="{active : isSelected(check)}">
        <button ng-click="setcolor(check)">{{check.name}} </button> &nbsp;
        <button ng-click="setcolor(check)">{{check.name}} </button> &nbsp;
        <button ng-click="setcolor(check)">{{check.name}} </button> &nbsp;
        <hr>
    </li>
  </ul>
  <hr>
   {{selected | json}}
</div>

这是我的控制器

function MainController($scope) {
    $scope.checks = [
       {name: 'sports'},
       {name: 'movies'},
       {name: 'Others'}
    ];

    $scope.setcolor = function(chk) {
       $scope.selected = chk;
    }

    $scope.isSelected = function(check) {
       return $scope.check === check;
    }
}

这是我的 CSS 文件

.active {
   background-color: red;
 }

我想使用切换功能在每一行中选择一个按钮。假设在第一行选择按钮 1，在第二行选择按钮 2，在第三行选择按钮 1。

【问题讨论】：

像这样plnkr.co/edit/WTQREUzelTxzFUxzvOx4?p=preview

标签： javascript css angularjs angular-ui-bootstrap

【解决方案1】：

看起来你在isSelected 函数中有一个小错误。您想与$scope.selected 属性进行比较：

$scope.isSelected = function(check) {
    return $scope.selected === check;
}

【讨论】：

【解决方案2】：

其实我想要这样的东西，通过使用 ng-repeat... @罗希特·阿扎德

http://plnkr.co/edit/DvTcjGsN1Tnl8rleys1P?p=preview

**我的HTML代码是**

 <html ng-app="ui.bootstrap.demo">
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" 
     rel="stylesheet">
   </head>
<body>
   <div ng-controller="ButtonsCtrl">

     <h4>Radio &amp; Uncheckable Radio</h4>
     <pre>{{radioModel || ''}}</pre>
     <div class="btn-group, btn- toggle">
         <label class="btn btn-default" ng-model="radioModel" btn-radio="'Left'">Left</label>
        <label class="btn btn-default" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
       <label class="btn btn-default" ng-model="radioModel" btn-radio="'Right'">Right</label>
    </div>

    </div>
</body>
</html>

这是我的控制器

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope) {
  $scope.singleModel = 1;

  $scope.radioModel = '';

 $scope.checkModel = {
      left: false,
      middle: false,
      right: false
 };
});

这是我的 Css 文件

.btn-toggle {
height: 32px;
border: 1px solid $basic-btn;
border-radius: 4px;
.btn-primary
{
  background: $bg-white;
  border-right: 1px solid $basic-btn;
  color: $black;
  &:hover, &.active
{
 background: $basic-btn;
 color: $bg-white;
 } 
}
 .btn-primary:last-child
{
 border-right: none;
}
.btn-primary:nth-child(2)
{
  border-right: 2px solid $basic-btn;
  border-left: 1px solid $basic-btn;
}
}

【讨论】：

【解决方案3】：

嗨**@Abishek**我创建了一个plunker，所有代码都包括**@dfsq**答案

我想你想要这个

Angular 代码是这样的

var appfi = angular.module('firstApp', []);

appfi.controller('MainController', function($scope){
    $scope.checks= [
       {'name': 'sports'},
       {'name': 'movies'},
       {'name': 'Others'}
    ];


    $scope.setcolor = function(chk) {
       $scope.selected = chk;
    };

    $scope.isSelected = function(check) {
    return $scope.selected === check;
    };

} );

HTML 代码

    <body ng-app="firstApp">
    <h1>Hello Plunker!</h1>

    <div ng-controller="MainController">
  <ul class="list-holder">
     <li ng-repeat="check in checks" ng-class="{active : isSelected(check)}">
        <button ng-click="setcolor(check)">{{check.name}} </button> &nbsp;
        <button ng-click="setcolor(check)">{{check.name}} </button> &nbsp;
        <button ng-click="setcolor(check)">{{check.name}} </button> &nbsp;
        <hr>
    </li>
  </ul>
  <hr>
   {{selected | json}}
</div>
  </body>

Plunker

【讨论】：

感谢@Rohit Azad 帮助我，但这不正确，我正在寻找。
感谢@Rohit Azad 帮助我，但这是不正确的，我只在一行中寻找一个按钮选择，但在你的情况下背景颜色显示。