如何使用 AngularJS 有条件地显示元素答案

【问题标题】：How can i conditionally display an element using AngularJS如何使用 AngularJS 有条件地显示元素
【发布时间】：2018-09-25 14:11:55
【问题描述】：

我想根据另一个参数 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 json key-value

【解决方案1】：

假设您了解 AngularJS 中的范围。

使用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>

【讨论】：