Как я могу условно отобразить элемент, используя AngularJS

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

Предполагая, что у вас есть знания scope в AngularJS .

Существует разница между использованием ng-if и ng-show.Всякий раз, когда вы используете ng-if, он создает собственную дочернюю область .и вы можете управлять им в пользовательской директиве, которая имеет дело с ее дочерней областью (дочерняя область недоступна в контроллере, если вы не напишите свой код способом, который сделает его доступным в контроллере), и вы можете взломатьобласть применения его в контроллер тоже.Но это не относится к ng-show.

Когда вы используете ng-show, он не удалит ваш HTML из дерева DOM , но если вы используете ng-if, он также удалитВаш HTML из дерева DOM .(Чтобы помочь вашей путанице, какой из них использовать)

У вас есть проблема с объемом, если я правильно понимаю.Используйте ng-show, и оно будет работать.

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