just a guess:
ng-class="{active: fav == selected}"
or if you only want to change displaying the button:
ng-show="fav == selected"
or
ng-show="fav != selected"
سؤال
I trying to create a click function which has two states add
and added
both states are visible in my solution, however i only want one state to show at a time. thus far my logic is to structure it in the following way. demo I have noticed when i click on the item the class is activated how i am unable to remove the class. Demo
<div ng-repeat= "fav in fav">
<div ng-click="select(fav)" ng-class="favClass(fav)" class="panel-controls panel-controls__item">
{{fav}}
</div>
var app = angular.module("myApp", []);
app.controller("favouriteBtn", function ($scope){
$scope.fav = ['add', 'added'];
$scope.selected = $scope.fav[0];
$scope.select = function(fav) {
$scope.selected = fav;
};
$scope.favClass = function(fav){
return fav === $scope.selected ? 'active' : underfined;
};
});
المحلول
just a guess:
ng-class="{active: fav == selected}"
or if you only want to change displaying the button:
ng-show="fav == selected"
or
ng-show="fav != selected"
نصائح أخرى
I would do it as Michael says.
On the view:
<div class="{{selected}}">
<div ng-show="selected == 'add'">
<button ng-click="toggleButton()">Button1</button>
</div>
<div ng-show="selected == 'added'">
<button class='disabled'>Button2</button>
</div>
</div>
On the controller:
angular.module('myApp').controller('ButtonCtrl',
[
'$scope',
function($scope){
$scope.fav = ['add', 'added'];
$scope.selected = fav[0];
$scope.toggleButton = function(){
$scope.selected = fav[1];
};
}
]);