How to use ng-if in angularJS

Question

I have used angularJS and i wonder how to use its if statement like this way. I don't know if my question is right but i just want to explain it through my example.

I have if like this..

<div data-ng-if="book.Availability>0">
  <div class="col-xs-12 col-md-12 nopadding" style="border-right:solid 6px blue">
     //some html div's here with angularJS
  </div>
</div>

<div data-ng-if="book.Availability==0">
  <div class="col-xs-12 col-md-12 nopadding" style="border-right:solid 6px red">
     //some html div's here with angularJS
  </div>
</div>

I have a code like that.. that //some html div's here with angularJS have common codes the only thing that deferent is the red and blue color in the container..

I think it is redundant to use that kind of code.. is it possible to use same that //some html div's here with angularJS for both if?

I tried like this.

<div data-ng-if="book.Availability>0">
      <div class="col-xs-12 col-md-12 nopadding" style="border-right:solid 6px blue">
  </div>
  <div data-ng-if="book.Availability==0">
      <div class="col-xs-12 col-md-12 nopadding" style="border-right:solid 6px red">
  </div>
    `//some html div's here with angularJS`

but there's no output..

Thanks for help..

I know my question is different from what i want.. but i don't really have an idea how to ask it..

use ng-class and conditionally apply a class to the container rather than using two basically identical DOM blocks. — mccainz
– mccainz, Commented Jul 30, 2014 at 1:48
Looking at the docs, it appears it should be ng-if="...", not data-ng-if="". And it requires an expression, which specifically states conditionals are not allowed. I could be wrong though, I've not messed with it much. — Jared Farrish
– Jared Farrish, Commented Jul 30, 2014 at 1:52
Dont use ng-if to solve that problem. It's not the tool for the job. plnkr.co/edit/mU0P7Bp1mFidWWfIUyX2?p=preview I put together a simple example using ng-class. — mccainz
– mccainz, Commented Jul 30, 2014 at 1:57

mccainz · Accepted Answer · 2014-07-30 02:01:49Z

ng-if is not the approach you should leverage to solve that problem. You are uneccesarilly duplicating DOM when all you have is a styling issue. Use your condition statement to apply a class to the div container rather than duplicating.

http://plnkr.co/edit/mU0P7Bp1mFidWWfIUyX2?p=preview

<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
  .book{border:solid 1px blue;}
  .unavailable{border-color: red;}
</style>
</head>

<body>
<h1>Hello Plunker!</h1>
<div ng-class="{'unavailable' : true}" class="book">
        Moby Dick
  </div>

  <script>
    var app=angular.module("app",[]);
    angular.bootstrap(document,["app"]);
  </script>
</body>

</html>

Seminda · Accepted Answer · 2014-07-30 03:06:05Z

0

I am not 100% sure what is your requirement. but looks like you want to display different contents according to a condition.

I have used your html and create a sample. please check whether what you want is this.Controller look like below code. TO check full sample go to the link.

function MyCtrl($scope) {
$scope.book={Availability:12};

}

Sample Code

edited Jul 30, 2014 at 3:06

answered Jul 30, 2014 at 2:50

Seminda

1,77312 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to use ng-if in angularJS

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related