ng-if validation for view angularjs

Question

>我有一个包含此信息的对象

{"ap_packets_wlan1":{"data":[["2017-08-01T12:54:40.000Z",1.13,-0.36],["2017-08-01T12:59:40.000Z",0.61,-0.22],["2017-08-01T13:04:40.000Z",0.01,-0.01],["2017-08-01T13:09:40.000Z",0,0],["2017-08-01T13:14:40.000Z",0.17,-0.16],["2017-08-01T13:14:40.000Z",null,null],["2017-08-01T13:24:38.000Z",0,0],["2017-08-01T13:24:38.000Z",null,null],["2017-08-01T13:34:40.000Z",0.25,-0.15],["2017-08-01T13:39:40.000Z",2.79,-3.54],["2017-08-01T13:44:40.000Z",0.07,-0.15],["2017-08-01T13:49:40.000Z",0.46,-0.18]],"options":{"labels":["Date","received","sent"],"showRangeSelector":true,"legend":"always","ylabel":"packets/s","title":"Packets","axes":{"y":{}},"width":{}}},"ap_signal_wlan1":{"data":[["2017-08-01T12:54:40.000Z",-28.66],["2017-08-01T12:59:40.000Z",-68.87],["2017-08-01T13:04:40.000Z",-8.31],["2017-08-01T13:09:40.000Z",0],["2017-08-01T13:14:40.000Z",-75.89],["2017-08-01T13:14:40.000Z",null],["2017-08-01T13:24:38.000Z",0],["2017-08-01T13:24:38.000Z",null],["2017-08-01T13:34:36.000Z",-82.22],["2017-08-01T13:39:36.000Z",-80.07],["2017-08-01T13:44:36.000Z",-41.26],["2017-08-01T13:49:36.000Z",-56.05]],"options":{"labels":["Date","average signal"],"showRangeSelector":true,"legend":"always","ylabel":"dBm","title":"Signal","axes":{"y":{}},"width":{}}},"ap_clients_wlan1":{"data":[["2017-08-01T12:54:40.000Z",0.49],["2017-08-01T12:59:40.000Z",1],["2017-08-01T13:04:40.000Z",0.12],["2017-08-01T13:09:40.000Z",0],["2017-08-01T13:14:40.000Z",0.87],["2017-08-01T13:14:40.000Z",null],["2017-08-01T13:24:38.000Z",0],["2017-08-01T13:24:38.000Z",null],["2017-08-01T13:34:40.000Z",2],["2017-08-01T13:39:40.000Z",1.27],["2017-08-01T13:44:40.000Z",0.62],["2017-08-01T13:49:40.000Z",0.66]],"options":{"labels":["Date","clients"],"showRangeSelector":true,"legend":"always","ylabel":"","title":"Clients","axes":{"y":{}},"width":{}}},"ap_bitrate_wlan1":{"data":[["2017-08-01T12:54:38.000Z",20.55,-21.42,12],["2017-08-01T12:59:38.000Z",7.42,-20.41,13.96],["2017-08-01T13:04:38.000Z",0.66,-2.33,1.6],["2017-08-01T13:09:38.000Z",0,0,0],["2017-08-01T13:14:38.000Z",0.87,-9.53,3.26],["2017-08-01T13:14:38.000Z",null,null,null],["2017-08-01T13:24:38.000Z",0,0,0],["2017-08-01T13:24:38.000Z",null,null,null],["2017-08-01T13:34:36.000Z",1.38,-26,6.64],["2017-08-01T13:39:36.000Z",1.46,-10.88,5.91],["2017-08-01T13:44:36.000Z",0.8,-3.99,2.37],["2017-08-01T13:49:36.000Z",0.67,-4.16,0.42]],"options":{"labels":["Date","receive","transmit","expected throughput"],"showRangeSelector":true,"legend":"always","ylabel":"Mbps","title":"Bitrate","axes":{"y":{}},"width":{}}},"ap_issues_wlan1":{"data":[["2017-08-01T12:54:40.000Z",0.07,0],["2017-08-01T12:59:40.000Z",0.18,0],["2017-08-01T13:04:40.000Z",0.03,0],["2017-08-01T13:09:40.000Z",0,0],["2017-08-01T13:14:40.000Z",0.33,-0.01],["2017-08-01T13:14:40.000Z",null,null],["2017-08-01T13:24:38.000Z",0,0],["2017-08-01T13:24:38.000Z",null,null],["2017-08-01T13:34:40.000Z",0.16,0],["2017-08-01T13:39:40.000Z",3.34,-0.18],["2017-08-01T13:44:40.000Z",0.62,-0.12],["2017-08-01T13:49:40.000Z",0.65,-0.1]],"options":{"labels":["Date","tx retries","tx failures"],"showRangeSelector":true,"legend":"always","ylabel":"issues/s","title":"Issues","axes":{"y":{}},"width":{}}},"ap_bandwidth_wlan1":{"data":[["2017-08-01T12:54:40.000Z",0.68,-0.41],["2017-08-01T12:59:40.000Z",0.63,-0.71],["2017-08-01T13:04:40.000Z",0.01,0],["2017-08-01T13:09:40.000Z",0,0],["2017-08-01T13:14:40.000Z",0.15,-0.12],["2017-08-01T13:14:40.000Z",null,null],["2017-08-01T13:24:38.000Z",0,0],["2017-08-01T13:24:38.000Z",null,null],["2017-08-01T13:34:40.000Z",0.13,-0.11],["2017-08-01T13:39:40.000Z",2.91,-25.1],["2017-08-01T13:44:40.000Z",0.05,-0.13],["2017-08-01T13:49:40.000Z",0.26,-0.19]],"options":{"labels":["Date","received","sent"],"showRangeSelector":true,"legend":"always","title":"Bandwidth","axes":{"y":{}},"width":{}}}}

我在我的视图中使用此信息

<tab heading="Wireless" select="changeTab()" disable="!tabClick" active="activeTab.ap">  
<div class="no-data" ng-if="activeNoData.ap">
<img src="/assets/img/nodata.png"/>
<h3>No Data</h3>
</div>
<tabset class="box-tab box-tab-sub"> 
<tab ng-repeat="type in dataGraph.ap.types" heading="{{type.label}}" select="changeSubTab(type.type)" disable="!tabClick">
<div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="graph in dataGraph.ap[type.type]" ng-if="dataGraph.ap[type.type]!=='ap_issues_wlan1'">
<p>{{dataGraph.ap[type.type]}}</p>
<p>{{dataGraph.ap[type.type]!=='ap_issues_wlan1'}}</p>
<img ng-if="!graph.options" style="height:32px;margin:50px auto;" src="/assets/img/loader.gif" />
<div ng-if="graph.options">
<dygraph options='graph.options' data="graph.data"></dygraph>
<br>
</div>
</div>
</tab>
</tabset>
</tab>

这将创建 4 张图表"带宽"、"比特率"、"客户端"、"问题"、"数据包"和"信号"。

我不想在我的对象中显示用键"ap_issues.wlan1"表示的"问题"的图表，为此我尝试了：

<div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="graph in dataGraph.ap[type.type]" ng-if="dataGraph.ap[type.type]!=='ap_issues_wlan1'">

但这不起作用，在我的页面中，我总是在 ng-if 中打印我的 obj 和我的条件的值"true"。

怎么做？

Answer 1

你可以尝试将ng-if放在一个子div上，如下所示：

<div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="graph in dataGraph.ap[type.type]" >
<div ng-if="graph != 'ap_issues_wlan1'">
</div></div>

我没有足够的声誉发表评论。

Answer 2

由于"ap_issues_wlan1"位于内部对象中，因此您必须将其从控制器中的数据对象中删除，请参阅此处plunker