//some html div-6ren">
gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 03:39:58 27 4
gpt4 key购买 nike

我用过 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com