1

I've been tinkering around a bit with AngularJS and the Ionic framework. Now I would like to display 12 buttons inside a popup. I have this all working, but I would like the buttons to switch appearance when they got pressed.

html

<label>
<p>Fill in catergory name</p>
<input type="text" placeholder="Rent">
</label>
<br />
<br />

<div class="row">
<div class="col col-25"><button class="button button-outline" id="button12in" ng-class="button12 ? 'button12in' : 'button12inpress'" ng-click="button12 = !button12">
</div>
</div>

As you can see I've been trying with button 12.

app.js

$scope.button12 = false;

css

#button12in {background-color: #51FF00;}


#button12inpress{border-style: solid; border-color: black; border-width: 4px;background-color: #51FF00;}

So the idea is that clicking on the button will change the state of $scope.button12. The result of this would be that via the ng-class the button will change style! but for some reason, this is not possible. It picks up the changed state of button12 but the ng-class isn't working in all kinds of syntax I've tried

André Kool
  • 4,880
  • 12
  • 34
  • 44
Martijn Bos
  • 125
  • 11
  • I do no believe the expression works like: `ng-class="button12 ? 'button12in' : 'button12inpress'"`. that should be `ng-class="{'button12in' : button12, 'button12inpress' !button12 }"` – ste2425 Dec 17 '15 at 13:03
  • I've changed it to `ng-class="{'button12in' : button12, 'button12inpress' : !button12}"' ` and to `ng-class="{'button12in' button12, 'button12inpress' !button12}" ` but neither of them worked :( – Martijn Bos Dec 17 '15 at 13:11
  • Take a look at http://stackoverflow.com/questions/24655033/change-button-style-according-to-state-angularjs – André Kool Dec 17 '15 at 13:17
  • @MartijnBox i was wrong with your expression. You initial expression is also valid. Your issue i think is your css selectors. They are targeting ids not class names. It should be `.button12in` not `#button12in`. See [Fiddle](https://jsfiddle.net/3nba9w6m/1/) also you could open it in dev tools to see if the class are actually applied. – ste2425 Dec 17 '15 at 13:20

2 Answers2

0

I think it should be

ng-class="{'class': trueOrFalse}"

To apply different classes when different expressions evaluate to true:

<div ng-class="{class1 : expression1, class2 : expression2}">
    Hello World!
</div>

To apply multiple classes when an expression holds true:

<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
    Hello World!
</div>

or quite simply:

<div ng-class="{'class1 class2' : expression1}">
    Hello World!
</div>

Notice the single quotes surrounding css classes.

or check this Adding multiple class using ng-class

Community
  • 1
  • 1
Arpit Goyal
  • 1,017
  • 12
  • 25
0

Don't use your flag directly on $scope , but rather try setting the flag on an object on $scope

Example Use $scope.flagContainer.button12 instead of $scope.button12

$scope.flagContainer = {
    button12 : false
}

Now change it view accordingly

Aneesh Kallarakkal
  • 333
  • 1
  • 8