How to add class to ng-repeat
Here's my 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>
<button ng-click="setcolor(check)">{{check.name}} </button>
<button ng-click="setcolor(check)">{{check.name}} </button>
<hr>
</li>
</ul>
<hr>
{{selected | json}}
</div>
and this is my controller
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 file
.active {
background-color: red;
}
I want to select one button per row using a toggle function. Suppose the first row has button 1 and second row 2 and third row button 1 selected.
+3
source to share
3 answers
Actually I want something like this with ng-repeat ... @ Rohit Azad
http://plnkr.co/edit/DvTcjGsN1Tnl8rleys1P?p=preview
** My HTML is **
<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 & 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>
Here is my controller
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
};
});
And here is my Css file
.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;
}
}
+1
source to share
hi **@Abishek**
I created a plunker with all the include code **@dfsq**
answer
I think you want this
Angular code is
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 code
<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>
<button ng-click="setcolor(check)">{{check.name}} </button>
<button ng-click="setcolor(check)">{{check.name}} </button>
<hr>
</li>
</ul>
<hr>
{{selected | json}}
</div>
</body>
0
source to share