How to apply ng-if in angular js

Question

I am retrieving data from service in the form.

[["Sql Injection",0],["Proxy Abuse",0],["Spam",0],["Information and Source Code Leakage",0],["System Command Injection",0],["Cross-Site Request Forgery",0],["Session Hijacking",0],["PHP Injection",0],["Request Anomaly",0],["Local/Remote File Inclusion",0],["Cross-Site Scripting",0]].

Now i want that if counts of each attack type are zero then nothing display. How can i handle this through ng-if. Template code:

<div class="col-md-6 b-r b-light no-border-xs" ng-show="webSummary[0]">
    <highchart id="chart1" config="webConfig" class="span9" ></highchart>           
</div>

ng-if="webSummary.length"

Lakshay Dulani
– Lakshay Dulani

2016-07-28 13:10:48 +00:00
Commented Jul 28, 2016 at 13:10 — Lakshay Dulani
– Lakshay Dulani, Commented Jul 28, 2016 at 13:10
It doesn't help, i tried it already.

Abdul Majeed
– Abdul Majeed

2016-07-28 13:12:20 +00:00
Commented Jul 28, 2016 at 13:12 — Abdul Majeed
– Abdul Majeed, Commented Jul 28, 2016 at 13:12

Yosvel Quintero · Accepted Answer · 2016-07-28 13:40:51Z

2

You can do:

angular
  .module('MyApp', [])
  .controller('MyController', function($scope) {
    $scope.webSummary = [["Sql Injection",0],["Proxy Abuse",0],["Spam",0],["Information and Source Code Leakage",0],["System Command Injection",0],["Cross-Site Request Forgery",0],["Session Hijacking",0],["PHP Injection",0],["Request Anomaly",0],["Local/Remote File Inclusion",0],["Cross-Site Scripting",0]];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp" ng-controller="MyController">
  <div class="col-md-6 b-r b-light no-border-xs"  
       ng-repeat="ws in webSummary"
       ng-if="ws[1]">
    <highchart id="chart1" config="webConfig" class="span9"></highchart>
  </div>
</div>

edited Jul 28, 2016 at 13:40

answered Jul 28, 2016 at 13:20

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abdul Majeed Over a year ago

good answer but need not to display visualization when all attacks counts are zero.

Yosvel Quintero Over a year ago

I have added a comment in the code: // For demo: ["System Command Injection",2]

Yosvel Quintero Over a year ago

@AbdulMajeed I have updated the answer based on your original array webSummary... Now do not show nothing.

singhakash · Accepted Answer · 2016-07-28 13:22:20Z

1

You can do

<div class="col-md-6 b-r b-light no-border-xs" ng-if="checkAttackCount()">
    <highchart id="chart1" config="webConfig" class="span9" ></highchart>           
</div>

In controller

function checkAttackCount(){    
  for(var i=0;i<webSummary.length;i++){
    if(webSummary[i][1]>0){
      return true;
    }
  }       
  return false;
}

answered Jul 28, 2016 at 13:22

singhakash

7,9196 gold badges33 silver badges65 bronze badges

Collectives™ on Stack Overflow

How to apply ng-if in angular js

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related