Question

我想根据另一个参数PaymentTypeid的值有条件地显示一个元素。在将条件设置如下后，“付款渠道”元素未在用户界面中呈现：

                <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之间。

Answer 1

假设您了解 AngularJS 中的范围。

使用ng-if和ng-show之间是有区别的。每当您使用ng-if时，它都会创建自己的子范围。并且您可以在处理其子范围的自定义指令中对其进行管理（除非您以某种方式编写代码，该子范围在控制器中不可用，否则它将在控制器中可用），并且可以入侵在 controller 中使用它的范围。但这不是ng-show中的情况。

使用ng-show不会从 DOM树中删除HTML ，但是如果使用ng-if也会从 DOM树中删除HTML < / strong>。（以帮助您混淆使用哪个）

如果我做对的话，这里有示波器问题。使用ng-show，它将起作用。

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

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

1 个答案: