ng-click изменить класс на выбранную кнопку

я хочу изменить класс btn-white на btn-primary для выбранной кнопки

$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>

angularjs ng-class angularjs-ng-click
person kenza    schedule 24.04.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

используйте ng-class. не используйте никакую функцию javascript для установки 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>

или вы можете использовать лучший подход:

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

см. плункер

person Mukund Kumar    schedule 24.04.2015
comment
Но мне нужно SelectedCombination(), чтобы вернуть комбинациюId для моей разработки - person kenza; 24.04.2015
comment
не волнуйтесь. Вы можете выполнить SelectedCombination() при нажатии кнопки. использовать отредактированный код. - person Mukund Kumar; 24.04.2015
comment
извините, удалите $scope из html. используйте это: ng-class={btn-primary:selectedCombination==combination.combinationId} - person Mukund Kumar; 24.04.2015
comment
проблема с - в btn-primary - person kenza; 24.04.2015
comment
используйте одинарную кавычку для btn-primary, например «btn-primary». Используйте отредактированный код, и я сделаю для вас plunker. просто проверьте там. - person Mukund Kumar; 24.04.2015
comment
` ‹button ng-repeat=комбинация в комбинациях class=btn ng-model=x value={{combination.combinationId}} ng-click=SelectedCombination(combination.combinationId); ng-class= selectedCombination==combination.combinationId? 'btn-primary' :'btn-white' type=button›{{combination.name}}‹/button› ‹!--‹класс кнопок=btn btn-primary type=button›Combinaison 2‹/button›-- ›` - person kenza; 28.04.2015

arrow_upward
0
arrow_downward

Существует что-то под названием Ng-Class. Ng-класс позволяет динамически устанавливать классы CSS для элемента HTML путем привязки данных к выражению, представляющему все добавляемые классы.

person Enrique Quero    schedule 24.04.2015