Question

这是我的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被选中。

Answer 1

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

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

Answer 2

实际上我想通过使用ng-repeat ... 来想要这样的东西 @ Rohit Azad

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;
}
}

Answer 3

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

我想你想要这个

角色代码就是这个

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

如何在ng-repeat中添加类

3 个答案: