Menu
Here is my Html code :
<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 in each row using toggle Functionality. Suppose in First row Selected button 1 and in second row button 2 and in third row button 1 is selected.
905
asked Dec 20 '25 03:12
Looks like you have a little mistake in isSelected function. You want to compare with $scope.selected property:
$scope.isSelected = function(check) {
return $scope.selected === check;
}
Actually i want something like this by using ng-repeat... @ Rohit Azad
http://plnkr.co/edit/DvTcjGsN1Tnl8rleys1P?p=preview
**My Html code 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;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With