I created a custom directive that generates a list of buttons using ng-repeat:
HTML
<div ng-controller="toggleButtonController" ng-init="init()" id="parent">
<div ng-repeat="btn in setting" style="display:inline">
<button class="btn" ng-bind="btn.name" ng-click="click(btn)" ng-class="getClass(btn, toggleButton.selected)"></button>
</div>
</div>
CONTROLLER
var app = angular.module('toggleButtonMod', [])
app.directive('toggleButton', function() {
return {
restrict: 'E',
scope: {
setting: '='
},
templateUrl: "app/Shared/togglebutton/toggleButtonView.html"
}
})
app.controller("toggleButtonController", function($scope) {
$scope.init = function() {
$scope.setupContent();
}
$scope.setupContent = function() {
$scope.toggleButton = {selected: null};
}
$scope.click = function(btn) {
$scope.toggleButton.selected = btn;
}
$scope.getClass = function(btn, toggleSelected){
if(btn === toggleSelected){
return 'btn-primary';
}else{
return 'btn-default';
}
}
})
In this scenario, I am looking for a way to change the ng-class of a specific button within the ng-repeat loop.
For example:
app.service('selectDefault', function(index) {
//set button #2 to have ng-class="btn-primary"
}