javascript - 如何在 angularJS 中使用 ng-if

标签 javascript jquery html css angularjs

我用过 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 有共同的代码,唯一不同的是 redblue 容器中的颜色..

我认为使用那种代码是多余的..是否可以将 //some html div's here with angularJS 用于两者 if?

我试过这样的。

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

但是没有输出..

谢谢你的帮助..

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

最佳答案

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>

关于javascript - 如何在 angularJS 中使用 ng-if,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25027547/

相关文章:

javascript - puppeteer 获取 href 数组,然后遍历每个 href 和该页面上的 href

html - 如何用行制作一行 div?

javascript - 事件选项卡是动态更改的,但单击页面上的任意位置更改为第一个选项卡处于事件状态

javascript - 添加具有唯一 id 的动态输入字段以进行计数

javascript - 以编程方式合并两个 svg 路径元素

javascript - 特定日期的倒计时

javascript - 如何查找哪个 Javascript 触发或处理事件?

javascript - Vue-router 重载组件

javascript - 检查是否启用了 Firefox 3.5 附加组件

Javascript同步调用更新