如何使用 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{json.name}}</strong></td>
                        <td class="width80">{{json.property}}</td>
                    </tr>
                    </tbody>
                </table>

关于我可能出错的任何见解。我不完全确定是使用 ng-if/ng-show 还是我设置 json.property 正确。

假设您在 AngularJS.

中了解 scope

使用 ng-ifng-show 是有区别的。每当您使用 ng-if 时,它都会创建自己的 子范围 。并且您可以在处理其 子范围 的自定义指令中管理它(子范围在控制器中不可用,除非您以某种方式编写代码,这将使它在控制器中可用)和您也可以破解范围以在 controller 中使用它。但在 ng-show.

中并非如此

当您使用 ng-show 时,它不会从 DOM 树 中删除您的 HTML,但如果您使用 ng-if它还会从 DOM 树 中删除你的 html。 (以帮助您混淆使用哪一个)

你这里有范围问题,如果我没弄错的话。使用 ng-show 即可。

<div ng-show="condition">
 your html markup
 </div>