Javascript 使用 AngularJS 创建渲染条件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14475284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a render condition with AngularJS
提问by Alon
I know how to make a viewcondition in AngularJS, that will display or hide dom element dependent on the condition:
我知道如何在 AngularJS 中创建一个视图条件，它将根据条件显示或隐藏 dom 元素：
<div ng-show="{{isTrue}}">Some content</div>
but how do I create a rendercondition that determines whether to render or not the div?
但是如何创建一个渲染条件来确定是否渲染 div？
回答by Umur Kontac?
Update for angularjs 1.1.5 and above users (not supported in 1.0.7):
angularjs 1.1.5 及以上用户更新（1.0.7 不支持）：
Related commit: https://github.com/angular/angular.js/commit/2f96fbd17577685bc013a4f7ced06664af253944
相关提交：https: //github.com/angular/angular.js/commit/2f96fbd17577685bc013a4f7ced06664af253944
Angular now have a conditional rendering directive: ngIf.
Angular 现在有一个条件渲染指令：ngIf.
Usage:
用法：
<div ng-if="conditional_expression"></div>
Note that when an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored
请注意，当使用 ngIf 删除元素时，如果它的作用域被销毁，并在元素恢复时创建一个新的作用域
For legacy angularjs users:
对于旧版 angularjs 用户：
ngShowdirective conditionally hides/shows the element. This is going to be changed in one of the new stable releases, it is now available in the unstablerelease as with 1.1.5.
ngShow指令有条件地隐藏/显示元素。这将在新的稳定版本之一中进行更改，现在可以在unstable版本中使用1.1.5.
If you want to conditionally add/remove items on DOM, use can use ngSwitch.
如果你想有条件地添加/删除 DOM 上的项目，可以使用ngSwitch.
<div ng-switch="showMe">
<div ng-switch-when="true">Hello!</div>
</div>
Actually, this directive has been created for handling cases for more than 1, but you can use it that way too. See thisanswer for examples of more sophisticated usages.
实际上，该指令是为处理 1 个以上的案例而创建的，但您也可以这样使用它。有关更复杂用法的示例，请参阅此答案。
回答by SunnyShah
Recommended way is to use ng-include
推荐的方法是使用ng-include
Example: http://jsfiddle.net/api/post/library/pure/
示例：http: //jsfiddle.net/api/post/library/pure/
<div ng-app="">
<div ng-controller="Ctrl">
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
url of the template: <tt>{{template.url}}</tt>
<hr/>
<div ng-include src="template.url"></div>
</div>
<!-- template1.html -->
<script type="text/ng-template" id="template1.html">
Content of template1.html
</script>
<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
Content of template2.html
</script>
</div>
回答by ?ukaszBachman
There are at least two ways of doing that:
至少有两种方法可以做到这一点：
- render some partial using templating
- use simple expression with conditional rendering function (see this fiddleand description below)
- 使用模板渲染一些部分
- 使用带有条件渲染功能的简单表达式（请参阅下面的小提琴和说明）
For simple components, I recommend sticking to the rendering function. Very easy to understand.
对于简单的组件，我建议坚持使用渲染功能。很容易理解。
$scope.render = function(condition) {
return condition ? "This is rendered when condition == TRUE" : "This is rendered when condition == FALSE";
};
and simply include it in your HTML, like so:
并简单地将其包含在您的 HTML 中，如下所示：
{{render(true)}}
You can also wrap this up with angular directive, which will give you very nice markup and unlimited possibilities!
您还可以使用 angular 指令将其包装起来，这将为您提供非常好的标记和无限的可能性！
回答by Chandermani
Look at angular-uiifdirective. I believe this would serve you purpose well.
查看angular-uiif指令。我相信这会很好地为您服务。
