ngIf和ng-if之间的角度差
ngIf和ng-if是Angular框架中的指令，用于条件性地显示或隐藏HTML元素。
ngIf是Angular版本2及以上中的指令，用于根据给定的条件来添加或移除DOM元素。它的语法如下：
<element *ngIf="condition">...</element>其中，condition是一个布尔表达式，如果为true，则元素会被添加到DOM中；如果为false，则元素会从DOM中移除。ngIf指令可以用于任何HTML元素。
ng-if是AngularJS版本1中的指令，用于条件性地显示或隐藏HTML元素。它的语法如下：
<element ng-if="condition">...</element>同样，condition是一个布尔表达式，如果为true，则元素会被显示；如果为false，则元素会被隐藏并从DOM中移除。ng-if指令也可以用于任何HTML元素。
两者的主要区别在于ngIf是Angular版本2及以上的指令，而ng-if是AngularJS版本1的指令。另外，ngIf指令在条件为false时只是将元素从DOM中移除，而ng-if指令会完全销毁元素及其对应的作用域。
ngIf和ng-if的优势是可以根据条件动态地显示或隐藏HTML元素，从而实现更灵活的页面交互效果。
应用场景：
- 根据用户的登录状态显示不同的导航菜单
- 根据用户权限显示或隐藏某些功能按钮
- 根据数据是否为空显示不同的提示信息
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云函数（SCF）：https://cloud.tencent.com/product/scf
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
请注意，以上链接仅为腾讯云相关产品的介绍页面，具体的使用方法和详细信息请参考官方文档或联系腾讯云客服。
相关·内容
有没有一种方法可以访问ng-If中的HTML标记的属性？
我现在有这个，但它似乎不起作用。
PS:我在指令中设置了属性。
<button ng-if="angular.element(this).attr('attributeName')" class="btn"> Secure</button>
编辑
如果满足条件，但条件是在向服务器发出HTTP请求的指令中确定的，我希望向DOM添加一个按钮。我不希望在收到来自服务器的响应之前显示该按钮，因此ngIf，我正在考虑在收到响应后向元素添加一个属性，以便ngIf计算为true。
浏览 3提问于2014-09-18得票数 0
我是编程新手，整天都在为这个问题而苦苦挣扎。 我正在尝试根据变量'buttons.buttonState‘的结果是0还是1来显示一些文本。当我在ngif之外使用{{buttons.buttonState}}时，它会返回结果，所以我知道它确实包含该变量。 <script>
var fetch = angular.module('myapp', []);
fetch.controller('userCtrl', ['$scope', '$http', function ($scope, $h
浏览 23提问于2019-02-15得票数 0
4回答
如何创建与ngELSE指令相同的ngIF指令？
下面是ngIfDirective的代码。我们应该自定义ngELSE的代码吗？
var ngIfDirective = ['$animate', function($animate) {
return {
multiElement: true,
transclude: 'element',
priority: 600,
terminal: true,
restrict: 'A',
$$tlb: true,
link: function($sc
浏览 2提问于2015-04-24得票数 6
回答已采纳
当“hr”分隔符在html内容下面有先前和下一个兄弟时，我想显示它：
<ul>
<li ng-if="condition1">One</li>
<li ng-if="condition2">Two</li>
<divider>
<li ng-if="condition3">Three</li>
<li ng-if="condition4">Four</li>
</ul
浏览 2提问于2017-07-28得票数 0
回答已采纳
2回答
我必须折叠展开重复的元素，因为我尝试在模板中使用局部变量，其作用域为ngFor。我可以用1.x角按下面的方式来做。但是我想在角2.x中实现同样的
角1.x实现(它有效)
<div ng-repeat="item in items" ng-init="expand=false" ng-click="expand=!expand">
<div ng-if="!expand">Small text</div>
<div ng-if="expand">Expanded
浏览 5提问于2017-06-19得票数 2
回答已采纳
1回答
我想知道ngIf和ng-if之间的区别是什么。在一些资源中，我看到使用了ngIf，在一些资源中使用了ng-如果使用的话。我知道ngIf和*ngIf。这不是我的问题，所以不要混淆这个问题。破折号是我不明白的地方。
浏览 39提问于2020-03-27得票数 2
回答已采纳
试图弄清楚如何单击等于特定状态的所有元素。我看这一页是用角度写的。我不知道是什么版本。我正在尝试使用chrome控制台来执行javascript，这样我就可以单击ng-if等于!isFollowing的所有元素。
<div class="follow-button ng-scope" ng-if="Auth.user._id && Auth.user._id != follower._id">
<!-- ngIf: !isFollowing -->
<a ng-if="!isF
浏览 1提问于2018-01-13得票数 0
我正在尝试使用document.getElementByClassName更改加载时的图标图像。这些图标重复出现几次。代码使用ngIf根据用户执行的条件显示不同的图标。
<img class="viewlist_button_icon ng-scope" ng-if="fun.__inViewlist" src="source_file/image.png">
<!-- end ngIf: fun.__inViewlist -->
<!-- ngIf: !fun.__inViewlist -->
我已经使用以下
浏览 2提问于2021-11-24得票数 0
以下是该网站上的选项卡的外观：
当它们被点击时，它会激活下面不同的数据表。
我正在试着激活钻机选项卡。下面是图片中所有选项卡的HTML代码：
<ul class="nav nav-tabs di-nav-tabs" ng-class="{'show-scroll': tabsNeedScroll}">
<!-- ngRepeat: tab in tabState.tabs --><!-- ngIf: isDatasourceVisible(tab.datasourceId) --><li ng-
浏览 0提问于2017-06-08得票数 0
伙计们！
我正在为我的web应用程序编写一个组件，例如一个表。表组件有时是隐藏的，这意味着它在组件树中，但没有显示给用户。例如：
<custom-tab> <!-- shown -->
<custom-table />
</custom-tab>
<custom-tab> <!-- NOT shown -->
<custom-table />
</custom-tab>
隐藏(未显示)自定义表组件在ngOnInit-方法中加载它的数据，该方法通过角对两个表执行(显示和未显示)。如果我向表中
浏览 1提问于2016-10-27得票数 0
1回答
让我的抓取器感觉我没有做错什么，但是当我运行它时，它既没有获取任何数据，也没有抛出任何错误。这三个领域(电话，网页和电子邮件)我正在寻找。似乎电子邮件和网页链接是隐藏的，所以这两个字段的xpath相当混乱。任何想法都将受到高度赞赏。到目前为止，我已经尝试过：
import requests
from lxml import html
def startpoint():
url="https://www.truelocal.com.au/business/strata-report-sydney/sydney"
page=requests.get(url, hea
浏览 2提问于2017-05-06得票数 0
我一直在尝试使用invoke-Webrequest和"ParsedHtml.getElements“
ParsedHtml.getElementsByTagName("div") | Where{ $_.className -eq 'pricingContainer-priceContainer' } ).innerText
尝试获取值$8.29，但在下面的代码中使用它不会产生任何结果。我做错了什么？
<div class="pricingContainer pricingContainer--grid u-ngFade noCenterT
浏览 1提问于2016-02-07得票数 0
我正在尝试使用selenium在组合框中设置一个值。但是find_element_by_xpath语句无法按类或ng模型找到组合框(详细地说，我试图将股票的时间段从一天改为一周)。
该网页包含我正在搜索的元素的以下javascript
**<select ng-model="analysisGraph.periodselector.period" class="ng-valid ng-dirty ng-valid-parse user-success ng-touched">**
<!-- ngIf: !analysisGraph.pe
浏览 0提问于2020-01-26得票数 1
回答已采纳
1回答
我是angular js的新手。我想知道如何在分页框上应用样式。下面的代码提供了矩形框视图。`
<dir-pagination-controls
max- size = "10"
direction-links = "true"
boundary-links = "true"
class="ml-pagination-numbers" >
我想要下面的样式。
被检查的元素
<ul class="
浏览 7提问于2018-12-18得票数 1
1回答
我用一个角度来设定我的精灵的速度(或者方向，如果你愿意的话)，但是，我想让精灵以和我移动的角度相同的角度，按照这个角度旋转。
我是如何设定角度和速度的：
angle = (float)Math.atan2(0 - pos.y, 220 - pos.x); //using bottom mid of screen as destination for testing
//in update
pos.x += 200 * Math.cos(angle) * delta;
pos.y += 200 * Math.sin(angle) * delta;
sprite.setPosition(pos.
浏览 0提问于2015-10-10得票数 1
我有一个参数选项卡，我想单击该选项卡。
下面是相同的HTML。请帮帮我，由于ngIf: activewizmenu != 'parameters'的原因，我无法单击选项卡。
<div class="navigation-tab">
<!-- ngIf: activewizmenu == 'parameters' -->
<!-- ngIf: activewizmenu != 'parameters' -->
<div ng-if=&
浏览 0提问于2018-12-07得票数 0
我想编辑超文本标记语言和CSS代码，使其在页面上以不同的方式排列，这取决于是否满足条件或不使用AngularJS (ng命令)。 我有thisYear=true或false 如果thisYear为真，我希望标签和页面输入的超文本标记语言标签以某种方式排列，使用inLine css，如果年份为假，我想以不同的方式排列它。 如何在AngularJS (ngIf)中设置if/else语句并编辑html和CSS inLine？
浏览 18提问于2019-05-13得票数 0
回答已采纳
1回答
我在一个角度应用程序上使用选项卡，在用户需要的时候，我使用ngIf延迟加载指令和控件。问题是，如果用户浏览该选项卡，我不希望重新创建该选项卡，考虑到这一点，我将使用这个技巧来初始化选项卡一次，并在用户需要时显示它：
<button ng-click="tab.show=!tab.show">Toggle tab</div>
<div ng-if="tab.show || tab.initialized" ng-show="tab.show" ng-init="tab.initialized=true"
浏览 4提问于2014-11-03得票数 3
回答已采纳
我希望创建一个指令，根据来自服务的值(例如，检查用户角色)，检查dom中是否存在一个元素。
相应的指令如下所示：
angular.module('app', []).directive('addCondition', function($rootScope) {
return {
restrict: 'A',
compile: function (element, attr) {
var ngIf = attr.ngIf,
value = $rootScope
浏览 0提问于2013-12-02得票数 51
回答已采纳
我正在尝试在离子应用程序中实现从api收到的产品类别。但是在实现相同的方法时，我得到了以下错误
Error: Template parse errors:
Can't bind to 'ng-if' since it isn't a known property of 'div'."
代码如下：
<div class="width50" *ngFor="let object of dataList">
<div *ng-if= "{{object?.categories
浏览 8提问于2017-07-07得票数 1
回答已采纳
在使用AngularJS编写错误消息指令时，我一直在努力解决范围问题。
我有一个ng-if和ng-class指令作为指令模板的一部分，但是ng类指令中的表达式似乎总是返回一个空字符串，除非：
我删除了ng-if指令。
或者，我删除了指令定义对象中的“替换”键。
查看我的指令的编译输出，如果ng-if或替换键被移除，看起来就会创建一个孤立的作用域，但是如果它们都留在html输出中，那么html输出中就没有ng-隔离范围类，只是ng-作用域。
我真的很想确切地了解这里发生了什么，并对任何解释表示感谢。
指令定义
angular.module('myMessages'
浏览 4提问于2016-03-27得票数 6
回答已采纳
3回答
我正在为内部内部网开发一个使用Selenium的VBA网络刮板，并且被卡住了提取几个片段。我很幸运地使用CSS访问了大多数数据，但遇到了一些情况，其中类是常用的，并且某些元素的位置可能会有所不同。
<div class="col-xs-12 col-sm-4 header-section header-list">
<li>
<i class="hire-icon-contactcard-outline header-list-icon"></i>
<span class="moda
浏览 4提问于2019-03-27得票数 1
1回答
HTML代码如下:密码节点：
<input name="customerPassword" type="password" class="customer-password form-control ng-dirty ng-valid-required filled ng-valid ng-valid-minlength" ng-class="{
'input-error': submitted && securityForm.customerPassword.$invalid,
浏览 4提问于2020-04-26得票数 1
回答已采纳
我正在努力将一个巨大的角度形式迁移到一个新的布局中(不能改变技术)。当前版本是从一个巨大的、讨厌的javascript数组中提取的，该数组被输入到一个ng-repeat中，并调用各种模板。除了一些新的css内容之外，模板在新表单中没有变化。生成html表单所遵循的新/旧路径是由服务器端功能切换控制的(并不是真正导入到这个问题)。
对于表单，唯一的区别是我不是在ng-repeat循环中，而是在定义得更好的布局中多次执行ng-include。
我遇到的问题是，传递给每个ng-include元素的值只能得到页面上最后一次调用的ng-init值，参见下面的示例。
<!-- begin templ
浏览 4提问于2020-02-14得票数 0
回答已采纳
我最近从jQuery切换到Angularjs，我正在为链接重新编码一些分页逻辑(“下一步”、“前一个”等等)。之前是用jQuery风格的Javascript编写的。
每个链接都有一个ngIf条件(例如，“以前的”链接不会显示您是否在第1页上)加上一个ngClick事件，该事件实质上更新了一个名为$scope.pagination.position的作用域变量，该变量确定了表中显示的结果。
我的原始代码是这样的(为了清晰起见简化了)：
模板
<a ng-if="pagination.position > 0" ng-click="pagination.firs
浏览 2提问于2015-08-28得票数 1
有人可以帮助我在这个html脚本，因为我是第一次使用web scraping data domain使用rvest pkg？我将发布html文件，以方便地描述我的障碍。我想要的是在br标签之前的<li ng-if="check_int(profile.funding_round.investment_total)" class= "ng-binding ng-scope">下的总值。请参阅html插入的最后一行。非常感谢。
<ul class="page-highlights no-bullet-list inline-list t
浏览 0提问于2017-09-27得票数 0
代码说明了一切。
我知道ngIf将从DOM中删除或克隆元素，但我不明白为什么popover指令会受到影响(popover- is -open)。
Plunker：
<div>
<input type="text"
uib-popover="This one will appear"
popover-placement="right"
popover-is-open={{true}}
/>
</div>
<div ng-if="t
浏览 4提问于2016-09-23得票数 0
1回答
我有一个指令，只有当我的身份验证服务告诉我这样做的时候，我才会提供指令：
<div my-loggedin-directive ng-if="security.isAuthenticated()"></div>
指令本身是非常空的：
.directive('myLoggedinDirective', [
function() {
return {
templateUrl: 'modules/myLoggedinDirective.tpl.html',
浏览 1提问于2014-06-10得票数 0
回答已采纳
1回答
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-corner-top ng-binding ng-scope ui-state-active" ng-click="updateActiveTab($index)" role="tab" ng-class="{'ui-state-active': tabs.active == $index}" ng-if="isUs
浏览 2提问于2016-06-23得票数 0
回答已采纳
<span ng-click="addReqPage()" class=" wrapper-xs text-center cursor-pointer" tooltip-placement="bottom" data-toggle="tooltip" tooltip="Add Specification">
<!-- ngIf: is_create_requirement -->
<i class="mdi mdi-plus ng-scope"
浏览 0提问于2018-02-22得票数 2
1回答
我正在研究硒的网页爬行，我发现了一些错误。
这是我的编码如下。
from selenium import webdriver as wd
main_url = 'https://searchad.naver.com/'
driver = wd.Chrome(executable_path='chromedriver.exe')
我登录了
# access main url2
main_url2 = 'https://searchad.naver.com/my-screen'
# close popup window
driver.find_e
浏览 0提问于2018-08-19得票数 0
回答已采纳
我正在研究硒的网页爬行，我发现了一些错误。
这是我的编码如下。
from selenium import webdriver as wd
main_url = 'https://searchad.naver.com/'
driver = wd.Chrome(executable_path='chromedriver.exe')
我登录了
# access main url2
main_url2 = 'https://searchad.naver.com/my-screen'
# close popup window
driver.find_e
浏览 1提问于2018-08-20得票数 2
我试图使用selenium从下拉菜单中选择一个选项，具体取决于下面代码行计算的值。
elem = driver.find_element('xpath','xpath_value')
select = Select(driver.find_element('xpath','//*[@id="qty"]'))
select.select_by_visible_text(elem.text) # value of elem.text = 1
下拉菜单的HTML代码如下所示
<select ng-disabled
浏览 6提问于2022-08-13得票数 0
1回答
几何图形的连接边界
、、、
我正在创建一个模拟petri网的Android应用程序。我用圆圈和正方形表示这些视图，我用弧线将这些视图连接起来(为了我的目的，它只是petri网的名字-它只是一条直线)，这是我面临的问题，我知道如何连接这些视图的中心点，但我不知道如何连接圆圈和正方形的边界，看看图像，它应该解释一切：
在我的应用程序中，我知道如果我指向一个地方(圆圈)或过渡(正方形)，我也知道这些视图的维数和坐标，你能建议我写一个算法的起点吗?这个算法将连接这两个形状的边框，并在线的末端绘制箭头？提前感谢
浏览 0提问于2015-06-04得票数 1
回答已采纳
1回答
iam在paypal页面上，我需要点击同意按钮与自动化
<form id="ryiForm" class="proceed ng-pristine ng-valid" ng-class="{true: 'validated'}[validated]" ng-submit="confirm.$valid && onPay()" novalidate="novalidate" name="confirm">
<!-- {@i
浏览 1提问于2015-10-29得票数 2
回答已采纳
我们在页面上有下面的代码，它有角ng-if条件。
<p ng-if="!old_email" style="line-height: 20px; font-weight: normal;"><b>Hi,</b><br><br>
We have created a new account with ’{{ new_email }}‘, for you on<br> Plobal Apps to preview and test your app
浏览 7提问于2016-04-19得票数 11
回答已采纳
3回答
我有一个表，我想在td中获取href和td值，它们的类名为ng-binding(class="ng-binding")。
我的当前代码正确地获得了href值，但是我也希望得到相应的td值(test文件夹/30节/这个是一个示例-vio.mp4和test文件夹/29示例)，我想要以下数据：
1) section/this-is-a-sample-video.mp4：：测试文件夹/30
2) section/this-is-a-sample-video2.mp4：：#en0#文件夹/29
如果专家告诉我如何在td .Thanks前面用粗体显示href和值，我会很感激。
<?p
浏览 3提问于2016-12-16得票数 1
回答已采纳
1回答
复向量的成对角计算
、、、
我有一个复向量(cv)，如下所示： 743.000000000000 + 1150.00000000000i
744.000000000000 + 1147.00000000000i
745.000000000000 + 1146.00000000000i
746.000000000000 + 1144.00000000000i
748.000000000000 + 1145.00000000000i
751.000000000000 + 1145.00000000000i
756.000000000000 + 1145.00000000000i
760.000000000000 + 114
浏览 5提问于2019-09-17得票数 2
回答已采纳
如果是SPAN NG-IF，是否有可能“点击”按钮？或者我完全看错了。如果我点击下拉菜单上的其他东西，这个名字“Lóuna”就会改变。我已经列出了所有的名字，但我不知道如何点击其中的任何一个。蒂娅！
<button class="dropdown-toggle button ico-marina" aria-expanded="false" aria-haspopup="true" type="button" ng-class="{ 'ico-marina': vm.
UserService.getA
浏览 1提问于2017-09-17得票数 0
1回答
我希望在我自己的指令中使用NGIF作为一种包装。
我发现下面的例子非常有效.
var NAME = 'yourCustomIf';
angular.module('myApp', [])
.directive(NAME, function (ngIfDirective) {
console.log(ngIfDirective)
var ngIf = ngIfDirective[0];
return {
transclude: ngIf.transclude,
priority: ngIf.priori
浏览 2提问于2016-10-03得票数 0
回答已采纳
我试图单击此日历并使用selenium自动插入日期，但我得到了以下错误：
无效元素状态:元素必须是用户可编辑的，才能清除它。
HTML片段
<a id="enddate-dropdown" class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="">
<p class="custom-datepickers__date-prefix ng-binding
浏览 1提问于2019-11-15得票数 3
回答已采纳
2回答
在AsyncPipe中使用*ngIf时，如果连接到AsyncPipe的Observable在*ngIf变为真之前推送其值，则从AsyncPipe返回的值将是不正确的。
例如，假设我有：
<div *ngIf="showPipe">
<div *ngFor="let item of arrObs | async">{{item}}</div>
</div>
然后假设事件按以下顺序发生：
showPipe是假的
arrObs推1,2,3
showPipe设置为true
据我所见，*ngFor
浏览 9提问于2020-05-18得票数 3
回答已采纳
1回答
这是我显示输入字段的指令：
JS:
.directive('isField', function () {
return {
restrict: 'EA',
template: '<div class="form-group">' +
'<label class="col-sm-2 control-label">{{prop}}</label>' +
'<div class="
浏览 4提问于2015-12-15得票数 0
我有以下几点
<div ng-if="false"> nothing here </div>
难道不应该隐藏div的内容吗？
我想让它稍微复杂一点，就像这样：
<div ng-if="user.id == 1">
The name is: {{user.name}}
</div>
但上述方法都不起作用。
目的是如果ng-if表达式为true，则在div中运行代码。ngIf是否是正确的表达式，或者是否有更好的布尔/表达式处理程序？
浏览 1提问于2013-10-28得票数 1
回答已采纳
这个柱塞来自Angular ngOptions示例：
但是，我向第一个select添加了一个ngIf，结果是：
<div ng-if="1<2">
Color (null not allowed):
<select ng-model="myColor" ng-options="color.name for color in colors"></select><br>
</div>
有趣的是，您可能会注意到，当您更改选择时，ngIf会破坏ngModel绑定，而不会
浏览 1提问于2014-10-28得票数 0
我没有意识到ng-if创建了一个子范围，这造成了相当大的混乱。ng-if创建作用域的原因/好处是什么?创建子作用域的其他内置指令是什么？
在ngIf中创建的作用域使用原型继承从其父范围继承。
浏览 3提问于2014-10-30得票数 2
有人能解释一下为什么Angularjs ngIf指令像false那样读“f”和“F”
不起作用的简单示例：
<input type="text" ng-model="test" />
<div ng-if="test">{{test}}<div>
如果你把'f‘或'F’放在div中没有显示，任何其他字母或正弦都可以。
演示：
浏览 5提问于2014-01-25得票数 9
回答已采纳
我已经在这个问题上做了一段时间了，我有一个嵌套的ng-重复如下两个ng-if的。
section(ng-controller="SideBarController as sidebar")
div.sas-sidebar.navbar-default.sidebar(role="navigation")
div.navbar-default.sidebar(role="navigation")
div.sidebar-nav.navbar-collapse
ul.nav.in#side-menu
浏览 3提问于2016-04-12得票数 1
回答已采纳
我正试着理解ng的工作-如果与ng-显示形成对比。在阅读了文档并遍历了相关的堆栈溢出问题之后，我了解到ng-if移除DOM元素和ng-if中的作用域变量。也就是说，在“删除”ng-if元素中的模型变量不会出现在$scope中。
来自:-
注意，当使用ngIf删除元素时，它的作用域将被销毁，并在元素恢复时创建一个新的作用域。在ngIf中创建的作用域使用原型继承从其父范围继承。其中一个重要的含义是如果ngModel在ngIf中被用来绑定到父作用域中定义的javascript原语。
考虑以下代码片段：-
<!doctype html>
<html>
<hea
浏览 2提问于2014-06-04得票数 3
回答已采纳
3回答
我写了一个angularjs指令。在该指令的模板中，我添加了一个ngIf指令，并在其中显示了绑定到我的指令作用域的输入。
<div ng-if="bool"><input ng-model="foo"></div>
我注意到，在经过多次试验和错误之后，ngIf指令导致模型在输入文本发生更改时不会更新。如果我将其更改为ngShow，一切都会按预期运行。
我正在寻找这种差异的解释。
浏览 1提问于2014-02-02得票数 28
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
