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

Question

对于我正在构建的设备的详细信息视图页面，我使用了 Angular 的 ng-show 和 ng-hide 指令来根据设备状态颜色更改按钮显示。我使用 {{item.transaction_Mode}} 从数据库中获取颜色。 Angular 部分似乎可以正常工作，因为它可以正确输出“true”和“false”，但是当它与 ng-show 结合使用时，例如 ng-show='true'，它就不起作用了。

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-when 也不起作用。 任何帮助将不胜感激，在此先感谢！

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 不需要使用 {{}}。