Question

我一直在使用AngularJS和Ionic框架进行修补。现在我想在弹出窗口中显示12个按钮。我把这一切都搞定了，但我希望这些按钮能够在按下时切换外观。

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>

正如您所看到的，我一直在尝试使用按钮12。

app.js

$scope.button12 = false;

CSS

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


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

所以我的想法是单击按钮将改变$ scope.button12的状态。结果就是通过ng-class按钮会改变风格！但由于某种原因，这是不可能的。它获取了button12的更改状态，但是ng-class并没有使用我试过的各种语法

Answer 1

我认为应该是

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

当不同的表达式评估为true时应用不同的类：

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

当表达式成立时应用多个类：

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

或非常简单：

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

注意围绕css类的单引号。

或查看此Adding multiple class using ng-class

Answer 2

请勿直接在$scope上使用您的旗帜，而是尝试在$scope上的对象上设置旗帜

实施例使用$scope.flagContainer.button12代替$scope.button12

$scope.flagContainer = {
    button12 : false
}

现在相应地更改视图

Ng-class不在Popup模板Ionic中工作。我究竟做错了什么？

2 个答案: