CODEWITHSUNDEEP
angularjsangularjs-ng-clickng-class
kenza
kenza

Reputation: 195

ng-click change class to selected button

i want to change class btn-white to btn-primary for the selected Button 

$scope.SelectedCombination = function (combinationId) {
        $scope.selectedCombination =combinationId;
    };

html

<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId)"  type="button">{{combination.name}}</button>

Upvotes: 2

Views: 3600

Answers (2)

Mukund Kumar
Mukund Kumar

Reputation: 23181

use ng-class.don't use any javascript function to set css.

<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId);clicked=true;" ng-class="{btn-primary:clicked}" type="button">{{combination.name}}
</button>

or you can use best approach:

<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId);" ng-class="{'btn-primary':selectedCombination==combination.combinationId}" type="button">{{combination.name}}
</button>

see plunker

Upvotes: 1

Enrique Quero
Enrique Quero

Reputation: 612

There is something called Ng-Class. Ng-class,allow you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.class

Upvotes: 0

Related Questions