ng-if validation for view angularjs

Question

I have a object with this info

{"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":{}}}}

and I use this info in my view

<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>

And this creates 4 graphs "Bandwidth", "Bitrate", "Clients", "Issues", "Packets" and "Signal".

I dont want to show the graph for "issues" represented with key "ap_issues.wlan1" in my object and for that I tried:

<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'">

But this dont work and in my page I'm always printing my obj and the value "true" of my condition in ng-if.

How to do this?

There is a discrepancy between the two snippets. The `ng-if` condition has `ap_issues_wlan1` quoted in the first, but not quoted in the second snippet. Can you confirm if its a typo? — 31piy, Aug 01 '17 at 14:17

score 0 · Answer 1 · answered Aug 01 '17 at 15:08

0

You can try to put ng-if on a sub div like this :

<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>

I don't have enough reputation to leave a comment.

answered Aug 01 '17 at 15:08

hmk

139
1
5

Is there a way to add the key at the same level of "data"? something like this : {"ap_packets_wlan1":{"Key":"ap_packets_wlan1", "data":....} – hmk Aug 01 '17 at 16:02
1

you aware of key, value while ng-repeating? like below
{{value}}
– Praveen Aug 01 '17 at 16:19
With this I could hide
– Cátia Matos Aug 01 '17 at 16:20
Yes what @praveenuics is suggesting should work ! see another example here : https://stackoverflow.com/a/15127934/5268014 If it's not working with "key", can you try to display its value like this {{key}} inside the div and tell us what it shows ? – hmk Aug 01 '17 at 16:36

score 0 · Answer 2 · answered Aug 01 '17 at 17:11

0

Since the 'ap_issues_wlan1' is in an inner object you have to remove it from data object in controller, see here plunker

answered Aug 01 '17 at 17:11

Praveen

347
1
3
20

Ok.. get it.. How can i display my graphs by a order I want instead of just doing a ng-repeat of type? Automatically this does asc by type name right? – Cátia Matos Aug 01 '17 at 17:16
correct but that depends on data object, in your case one object has multiple objects so anything has to be done in controller, i updated the plunker for order – Praveen Aug 01 '17 at 17:35

ng-if validation for view angularjs

2 Answers2