Fatal编程技术网
  • javascript/
  • Javascript 如何在ng repeat中添加类

Javascript 如何在ng repeat中添加类

javascript css angularjs

Javascript 如何在ng repeat中添加类,javascript,css,angularjs,angular-ui-bootstrap,Javascript,Css,Angularjs,Angular Ui Bootstrap,这是我的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>

这是我的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>
这是我的CSS文件

.active {
   background-color: red;
 }

    <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>
我想使用切换功能在每行选择一个按钮。假设在第一行中选择了按钮1，在第二行中选择了按钮2，在第三行中选择了按钮1。

看起来您在
isSelected
功能中有一个小错误。您要与
$scope进行比较。选定的
属性：


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



你好
***@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代码


.active {
   background-color: red;
 }



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




你好，普朗克！

    

  • 
{{check.name}
{{check.name}
{{check.name}

    

    • 




{{selected | json}}



实际上，我想通过使用ng repeat…
@罗希特·阿扎德



**我的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>


这是我的Css文件


感谢帮助我@Rohit Azad，但这不是我要找的正确答案。感谢帮助我@Rohit Azad，但这不是正确答案，我只想在一行中选择一个按钮，但在您的情况下，背景色显示。如下所示

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