我试图理解ng-if和ng-show/ 之间的区别ng-hide,但它们看起来和我一样.
我是否应该记住选择使用其中一种？
我正在开发Angular应用程序.我尝试使用ng-if并在ng-repeat内切换,但没有成功.我有以下数据:
**[{"_id":"52fb84fac6b93c152d8b4569",
"post_id":"52fb84fac6b93c152d8b4567",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"hoot",},
{"_id":"52fb798cc6b93c74298b4568",
"post_id":"52fb798cc6b93c74298b4567",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"story",},
{"_id":"52fb7977c6b93c5c2c8b456b",
"post_id":"52fb7977c6b93c5c2c8b456a",
"user_id":"52df9ab5c6b93c8e2a8b4567",
"type":"article",},**
$ scope.comments =上面提到的数据
和我的Html一样:
<div ng-repeat = "data in comments">
<div ng-if="hoot == data.type">
//differnt template with hoot data
</div>
<div ng-if="story == data.type">
//differnt template with story data
</div>
<div ng-if="article == data.type">
//differnt template with article data
</div>
</div>
我怎样才能在Angular中实现这个功能？
有没有办法告诉AngularJS不要显示具有ng-if指令的顶级HTML元素.我希望angular只显示子内容.
角度代码:
<div ng-if="checked" id="div1">
<div id="div2">ABC</div>
<div id="div3">KLM</div>
<div id="div4">PQR</div>
</div>
呈现的HTML:
<div id="div1">
<div id="div2">ABC</div>
<div id="div3">KLM</div>
<div id="div4">PQR</div>
</div>
我想要的是:
<div id="div2">ABC</div>
<div id="div3">KLM</div>
<div id="div4">PQR</div>
这是一个小提琴.http://jsfiddle.net/9mgTS/.我不想要#div1HTML.我只是想#div2,3,4,如果checked是true.
一个可能的解决方案是将ng-if添加到所有子元素,但我不想这样做.
我正在尝试在具有"ng-if"的图像上使用"ng-mouseover"指令并且它不起作用但是如果我使用"ng-show"指令它可以工作,大家能告诉我为什么吗？或者这是一个AngularJS问题？
在AngularJS文档中,我无法阅读有关它的任何内容:https://docs.angularjs.org/api/ng/directive/ngMouseover
NG-秀
<button ng-show="true" ng-mouseover="countOne = countOne + 1" ng-init="countOne=0">
Increment (when mouse is over)
</button>
Count: {{countOne}}
NG-如果
<button ng-if="true" ng-mouseover="countTwo = countTwo + 1" ng-init="countTwo=0">
Increment (when mouse is over)
</button>
Count: {{countTwo}}
ng-if有时会导致我的页面上的链接在加载时显示,然后消失.
该链接根本不应该显示,我假设ng-if语句尚未处理第二个我能够看到它.
有没有办法阻止链接或元素显示？
我也猜测currentClass对象尚未加载,因此ng-if无法评估,但我试图将其默认为隐藏,直到ng-if可以解决.
<span ng-if="isFaculty && !currentClass.courseInformation.IsCustomCourse">
<a ng-href="{{$window.BasePath}}lms/class/{{$stateParams.classid}}/instructorguide/download">
<span class="cec-msword-icon"></span>Download Instructor Guide</a>
<span>| </span>
</span>
我有一个代码 <div class="flex-container" *ngIf="mail"> Some data </div>
我有一个错误 Can't bind to 'ngIf' since it isn't a known property of 'div'.
我怎么解决它？
如何使用 ng-if 实现在 angularJS 中检查 null Date ？
HTML 源代码是
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>D.O.B</th>
</tr>
</thead>
<tr ng-repeat="x in names>
<td>{{ x.Name }}</td>
<td><span ng-if="x.DOB != null">{{ formatDate(x.DOB) | date:'dd-MM-yyyy' }}</span></td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = [
{ Name: 'Jani', DOB: '' },
{ Name: 'Hege', DOB: '1995-05-07' },
{ Name: 'Kai', DOB: '1995-08-24' }
];
$scope.formatDate = function (date) …ng-if如果条件满足,我试图用来显示某些行,但似乎不能让它100%正确地工作.
<div style="margin-bottom: 1em;">
<h4><!-- content omitted for brevity--></h4>
<p>
<strong>Covered:</strong>
<a ng-href class="pointer" data-ng-repeat="life in data.list2 track by $index" ng-if="life.beneficiary.length > 0" ng-click="c.editBeneficiary(life)">
<!-- content omitted for brevity-->
</a>
<a ng-href class="pointer" ng-if="life.beneficiary.length = 0" ng-click="c.addBeneficiary()">Add Beneficiary <i class="fa fa-plus-circle" style="color: green;"/></a></p>
</div>
在上面的代码中,如果受益人的数量大于0(ng-if="life.beneficiary.length > 0"),我想列出名称并允许用户在必要时编辑它们.这部分工作正常.但是,如果受益人数等于0,那么我希望有一个"添加受益人"的链接,并允许用户这样做.
我把这些ng-if陈述放在<a>标签中,我不确定是对的.当我与没有受益人的用户登录时,"添加受益人"链接不会显示.
试图找出ng-if.为什么要执行警报功能？谢谢
<div ng-if="false">
<script> alert("a"); </script>
</div>
我使用angularjs,我有一个问题,ng-if当我使用返回的函数true或false在两个API,浏览器冻结
self.isShow= function() {
service.getKioskLogByKioskId([stateParams.kioskId], function (data) {
self.kioskLog = data;
service.getKiosk([stateParams.kioskId], function (kiosk) {
self.kiosk = kiosk;
debugger
if (self.kioskLog.isConnected && self.kiosk.isActive)
return true;
else
return false;
});
});
}
并在HTML中
ng-if="self.isShow()"
我创建了一个 mat-dialog 组件来触发 http 响应。当我在 mat-dialog 的 html 中包含 ngIf 语句时，它不会被处理。在控制台上显示如下警告。
无法绑定到“ngIf”，因为它不是“div”的已知属性。
NgIf 在项目中的所有其他组件中运行良好。
在打字稿文件中调用 mat-dialog。
this.matDialog.open(PaymentModelComponent, {
width: "630px",
data: { message: response.comment },
autoFocus: false,
height: "630px",
});
html代码
<div *ngIf="true"><p>Show this only if "show" is true</p></div>
为什么 ng-if 不能在 mat-dialog 中工作？
我正在创建一个包含英超联赛数据的表格.我试图用来ng-if检查主队是否赢了,如果是这样的话加一个单元说"主队赢了"
HTML
<div ng-if="data.full_time_result: === 'H'">
<td>Home Team Won!</td>
</div>
然而,这增加了"主队赢了!" 即使full_time_result不是'H',也是每一行.
这是plnkr的链接.
此外,实现此功能的推荐方法是什么？有很多ng-if块可能不是最好的方法.
angularjs-ng-if ×12
angularjs ×11
javascript ×3
angular ×1
dom ×1
frontend ×1
html ×1
html-table ×1
laravel-4 ×1
servicenow ×1
typescript ×1