如何在angularJS中使用ng-if

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。 使用您的condition語句將一個類應用於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};

}

樣例代碼

如何在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