Question

我使用了angularJS，我想知道如何像这样使用if语句。我不知道我的问题是否正确，但我只想通过我的例子来解释。

我有这样的感觉..

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

我有一个类似的代码.. //some html div's here with angularJS有共同的代码，唯一不同的是容器中的red和blue颜色。

我认为使用这种代码是多余的..是否可以使用//some html div's here with angularJS同样的代码？

我试过这样。

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

但是没有输出..

感谢您的帮助..

我知道我的问题与我想要的不同......但我真的不知道怎么问它..

Answer 1

ng-if不是您应该利用来解决该问题的方法。当你拥有的所有东西都是样式问题时，你就不能复制DOM了。使用条件语句将类应用于div容器而不是复制。

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

我不是100％确定你的要求是什么。但看起来你想根据条件显示不同的内容。

我使用了你的html并创建了一个示例。请检查你想要的是这个。控制器看起来像下面的代码。要查看完整的样本，请转到链接。

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

}

Sample Code

如何在angularJS中使用ng-if

2 个答案: