如何使用 AngularJS 有条件地显示元素
How can i conditionally display an element using AngularJS
我想根据另一个参数 PaymentTypeid 的值有条件地显示元素。设置如下条件后,元素支付渠道未在 UI:
中呈现
<tr ng-init="paymentMode='BANK CABS'" ng-if="json.name == 'paymentTypeId' && json.property == '1'">
<td><strong>{{ 'label.heading.paymentchannel' | translate }}:</strong></td>
<td ><span >{{paymentMode}} </span></td>
</tr>
然而,当我重构标记如下时,元素显示为 :
<tr ng-init="paymentMode='BANK CABS'">
<td><strong>{{ 'label.heading.paymentchannel' | translate }}:</strong></td>
<td ><span >{{paymentMode}} </span></td>
</tr>
PaymentTypeId 在控制器中定义如下的 json 数组中:
scope.details = {};
resourceFactory.auditResource.get({templateResource: routeParams.id}, function (data) {
scope.details = data;
scope.details.paymentMode="";
scope.commandAsJson = data.commandAsJson;
var obj = JSON.parse(scope.commandAsJson);
scope.jsondata = [];
_.each(obj, function (value, key) {
scope.jsondata.push({name: key, property: value});
});
});
在视图中,PaymentTypeid 呈现为:
<table class="table" data-ng-show="details.commandAsJson" data-anchor>
<tbody>
<tr data-ng-repeat="json in jsondata">
<td class="width20"><strong> {{json.name}}</strong></td>
<td class="width80">{{json.property}}</td>
</tr>
</tbody>
</table>
关于我可能出错的任何见解。我不完全确定是使用 ng-if/ng-show 还是我设置 json.property 正确。
假设您在 AngularJS.
中了解 scope
使用 ng-if
和 ng-show
是有区别的。每当您使用 ng-if
时,它都会创建自己的 子范围 。并且您可以在处理其 子范围 的自定义指令中管理它(子范围在控制器中不可用,除非您以某种方式编写代码,这将使它在控制器中可用)和您也可以破解范围以在 controller 中使用它。但在 ng-show
.
中并非如此
当您使用 ng-show
时,它不会从 DOM 树 中删除您的 HTML,但如果您使用 ng-if
它还会从 DOM 树 中删除你的 html。 (以帮助您混淆使用哪一个)
你这里有范围问题,如果我没弄错的话。使用 ng-show
即可。
<div ng-show="condition">
your html markup
</div>
我想根据另一个参数 PaymentTypeid 的值有条件地显示元素。设置如下条件后,元素支付渠道未在 UI:
中呈现 <tr ng-init="paymentMode='BANK CABS'" ng-if="json.name == 'paymentTypeId' && json.property == '1'">
<td><strong>{{ 'label.heading.paymentchannel' | translate }}:</strong></td>
<td ><span >{{paymentMode}} </span></td>
</tr>
然而,当我重构标记如下时,元素显示为
<tr ng-init="paymentMode='BANK CABS'">
<td><strong>{{ 'label.heading.paymentchannel' | translate }}:</strong></td>
<td ><span >{{paymentMode}} </span></td>
</tr>
PaymentTypeId 在控制器中定义如下的 json 数组中:
scope.details = {};
resourceFactory.auditResource.get({templateResource: routeParams.id}, function (data) {
scope.details = data;
scope.details.paymentMode="";
scope.commandAsJson = data.commandAsJson;
var obj = JSON.parse(scope.commandAsJson);
scope.jsondata = [];
_.each(obj, function (value, key) {
scope.jsondata.push({name: key, property: value});
});
});
在视图中,PaymentTypeid 呈现为:
<table class="table" data-ng-show="details.commandAsJson" data-anchor>
<tbody>
<tr data-ng-repeat="json in jsondata">
<td class="width20"><strong> {{json.name}}</strong></td>
<td class="width80">{{json.property}}</td>
</tr>
</tbody>
</table>
关于我可能出错的任何见解。我不完全确定是使用 ng-if/ng-show 还是我设置 json.property 正确。
假设您在 AngularJS.
中了解 scope使用 ng-if
和 ng-show
是有区别的。每当您使用 ng-if
时,它都会创建自己的 子范围 。并且您可以在处理其 子范围 的自定义指令中管理它(子范围在控制器中不可用,除非您以某种方式编写代码,这将使它在控制器中可用)和您也可以破解范围以在 controller 中使用它。但在 ng-show
.
当您使用 ng-show
时,它不会从 DOM 树 中删除您的 HTML,但如果您使用 ng-if
它还会从 DOM 树 中删除你的 html。 (以帮助您混淆使用哪一个)
你这里有范围问题,如果我没弄错的话。使用 ng-show
即可。
<div ng-show="condition">
your html markup
</div>