如何NG重複addClass

這裏是我的html代碼：如何NG重複addClass

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

THIS IS MY CSS文件

.active { 
    background-color: red; 
}

我w ant使用切換功能在每一行中選擇一個按鈕。假設在第一行中選擇按鈕1，在第二行按鈕2中，在第三行按鈕1中被選擇。

來源

2014-10-08 Abhishek

因爲這樣http://plnkr.co/edit/WTQREUzelTxzFUxzvOx4?p=preview – 2014-10-08 11:17:12

看起來你在isSelected函數中有點小錯誤。你想與$scope.selected性能比較：

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

來源

2014-10-08 10:24:49 dfsq

喜**@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

來源

2014-10-08 10:39:06

感謝幫助我@羅希特阿扎德，但這是不正確的，即時通訊尋找。 – Abhishek 2014-10-08 10:53:20

感謝幫助我@羅希特阿扎德，但這是不正確的，我在尋找只有一個按鈕選擇在一行，但在你的情況下背景顏色顯示。 – Abhishek 2014-10-08 11:14:40

其實我想是這樣的，通過使用NG-重複... @羅希特·阿扎德

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

來源

2014-10-08 11:38:53 Abhishek

如何NG重複addClass

回答

相關問題