Question

对于设备的详细信息视图页面，我使用了Angular的 ng-show 和 ng-hide 指令来更改按钮根据设备状态颜色显示。我使用{{item.transaction_Mode}}从数据库中获取颜色。 Angular部分似乎确实起作用，因为它输出真实的＆＃39;并且＆＃39; false＆＃39;正确但当它与ng-show结合时，如ng-show =＆＃39; true＆＃39;它没有用。

HTML代码： -

颜色生成部分 -

<div  style="width: 30%; float: left">
                    <div ng-show="{{item.transaction_Mode == 'red'}}" class="col s1 m1 l1 vertical-line" style="height: 100%;width: 10px; background-color: red;float: left; " > </div>     
                    <div ng-show="{{item.transaction_Mode == 'orange'}}" class="col s1 m1 l1 vertical-line" style="height: 100%;width: 10px; background-color: orange;float: left; " > </div>     
                    <div ng-hide="{{item.transaction_Mode == 'red'}} || {{item.transaction_Mode == 'orange'}}" class="col s1 m1 l1 vertical-line" style="height: 100%;width: 10px; background-color: green;float: left; " > </div>     
                    <h1  style="text-align: left">{{devices[whichItem].name}} - [id  {{devices[whichItem].device_ID}}] </h1>
</div>

根据颜色部分显示按钮 -

<div  style="width: 70%; float: left; "> 


                   <button ng-hide="{{item.transaction_Mode == 'red'}} || {{item.transaction_Mode == 'orange'}}" style="margin-top:  20px; width: 17%; float: left; height: 46px;" type="button" data-target="modal1" class="Now waves-effect waves-light btn modal-trigger" >Now</button>
                    <p style="width: 3%; float: left"> </p>
                    <button  style="margin-top:  20px; width: 17%; float: left; height: 46px;" type="button" data-target="modal2" class="Later waves-effect waves-light btn modal-trigger ">Later</button>
                    <p style="width: 3%; float: left"> </p>
                    <button ng-show="{{item.transaction_Mode == 'orange'}}" style="margin-top:  20px; width: 17%; float: left; height: 46px;" type="button" class="waves-effect waves-light btn " >Get</button>
                    <p style="width: 3%; float: left"> </p>
                    <button ng-show="{{item.transaction_Mode == 'orange'}}" style="margin-top:  20px; width: 17%; float: left; height: 46px; " type="button" data-target="modal4" class="Cancel waves-effect waves-light btn modal-trigger" >Cancel</button>
                    <p style="width: 3%; float: left"> </p>
                    <button ng-show="{{item.transaction_Mode == 'red'}}" style="margin-top:  20px; width: 17%; float: left; height: 46px; " type="button" data-target="modal3" class="Return waves-effect waves-light btn modal-trigger" >Return</button>

</div>

但是这个相同的代码适用于另外两页，我不明白为什么它没有这个。 ng-if或ng-switch-何时无效。任何帮助将不胜感激，提前致谢！

Answer 1

错字错误。 ng-if，ng-show不需要{{}}绑定到$ scope数据。

所以，

<div  style="width: 30%; float: left">
                    <div ng-show="{{item.transaction_Mode == 'red'}}" class="col s1 m1 l1 vertical-line" style="height: 100%;width: 10px; background-color: red;float: left; " > </div>     
                    <div ng-show="{{item.transaction_Mode == 'orange'}}" class="col s1 m1 l1 vertical-line" style="height: 100%;width: 10px; background-color: orange;float: left; " > </div>     
                    <div ng-hide="{{item.transaction_Mode == 'red'}} || {{item.transaction_Mode == 'orange'}}" class="col s1 m1 l1 vertical-line" style="height: 100%;width: 10px; background-color: green;float: left; " > </div>     
                    <h1  style="text-align: left">{{devices[whichItem].name}} - [id  {{devices[whichItem].device_ID}}] </h1>
</div>

应该是：

<div  style="width: 30%; float: left">
                    <div ng-show="item.transaction_Mode == 'red'" class="col s1 m1 l1 vertical-line" style="height: 100%;width: 10px; background-color: red;float: left; " > </div>     
                    <div ng-show="item.transaction_Mode == 'orange'" class="col s1 m1 l1 vertical-line" style="height: 100%;width: 10px; background-color: orange;float: left; " > </div>     
                    <div ng-hide="item.transaction_Mode == 'red' || item.transaction_Mode == 'orange'" class="col s1 m1 l1 vertical-line" style="height: 100%;width: 10px; background-color: green;float: left; " > </div>     
                    <h1  style="text-align: left">{{devices[whichItem].name}} - [id  {{devices[whichItem].device_ID}}] </h1>
</div>

Answer 2

而不是：

ng-show="{{item.transaction_Mode == 'orange'}}"

使用：

ng-show="item.transaction_Mode == 'orange'"

Answer 3

AngularJs指令，如ng-show或ng-hide，不需要使用{{}}。

ng-hide＆amp; ng-show仅在特定的AngularJS页面中不起作用

3 个答案: