如何在angularJS中使用ng-if

Question

I have used angularJS and i wonder how to use its if statement like this way. 我用过angularJS，我想知道如何以这种方式使用它的if语句。 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.. 我有这样的代码.. //some html div's here with angularJS具有通用代码，唯一不同的是容器中的red和blue 。

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? 我认为使用这种代码是多余的..是否可以将//some html div's here with angularJS一起使用？

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.. 我知道我的问题不同于我想要的..但是我真的不知道如何提出问题。

Answer 1

ng-if is not the approach you should leverage to solve that problem. ng-if不是您应该用来解决该问题的方法。 You are uneccesarilly duplicating DOM when all you have is a styling issue. 当您仅有样式问题时，便可以轻松地复制DOM。 Use your condition statement to apply a class to the div container rather than duplicating. 使用您的condition语句将一个类应用于div容器，而不是重复。

http://plnkr.co/edit/mU0P7Bp1mFidWWfIUyX2?p=preview 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>

Answer 2

I am not 100% sure what is your requirement. 我不是100％知道您的要求是什么。 but looks like you want to display different contents according to a condition. 但看起来您想根据条件显示不同的内容。

I have used your html and create a sample. 我使用了您的html并创建了一个示例。 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 样例代码

如何在angularJS中使用ng-if

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-07-30 02:01:49

解决方案2
0 2014-07-30 02:50:47

如何在angularJS中使用ng-if

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-07-30 02:01:49

解决方案2 0 2014-07-30 02:50:47

解决方案1
2 已采纳 2014-07-30 02:01:49

解决方案2
0 2014-07-30 02:50:47