В AngularJS - как использовать НГ-если без HTML-элемента

Есть ли способ, чтобы сказать в AngularJS, чтобы не выводить в топ HTML-элемент, который имеет НГ-если директива. Я хочу, угловых для отображения только содержания ребенка.

Угловой Код:

    <div ng-if="checked" id="div1">
      <div id="div2">ABC</div>
      <div id="div3">KLM</div>
      <div id="div4">PQR</div>
   </div>

Созданный HTML:

   <div id="div1"> 
      <div id="div2">ABC</div>
      <div id="div3">KLM</div>
      <div id="div4">PQR</div>
   </div>

Чего я хочу:

   <div id="div2">ABC</div>
   <div id="div3">KLM</div>
   <div id="div4">PQR</div>

Здесь-это скрипка. http://jsfiddle.net/9mgTS/. Я не хочу #див1 в HTML. Я просто хочу, чтобы #див2,3,4 Если проверено в true.

Возможным решением может быть добавление НГ-если все элементы ребенка, но я не хочу этого делать.

Roham Rafii
Редактировал вопрос 4-го октября 2018 в 12:18
Программирование
javascript angularjs angularjs-ng-if
1-го ноября 2013 в 5:38
37 просмотров
Комментарии к вопросу (3)

Там's в настоящее время-недокументированные пары директив, НГ-если-старт " и " НГ-если-конца, которые вы можете использовать для этого. Они ведут себя аналогично документально [НГ-повтор-иng-repeat-end](https://docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points) директивы, и вы можете увидеть модульных тестов для them если вам нравится.

Например, следующий код:

<ul>
  <li ng-if-start="true">a</li>
  <li>b</li>
  <li>c</li>
  <li ng-if-end>d</li>
  <li ng-if-start="false">1</li>
  <li>2</li>
  <li>3</li>
  <li ng-if-end>4</li>
</ul>

первые четыре ли будут показаны и Финал четырехли будут скрыты.

Здесь'ы живой пример на сайт CodePen: http://codepen.io/anon/pen/PqEJYV

Есть также НГ-шоу-старт " и " НГ-шоу-конец директив, которые работают именно так, как вы ожидали бы их.

Mark Amery
Редактировал ответ 11-го августа 2015 в 9:11
Комментарии (0)

Если вы готовы создать пользовательский директива, вы можете применить НГ-если с детьми программно и разогнуть дом в процессе:

Код Директивы:

.directive('ngBatchIf', function() {
    return {
        scope: {},
        compile: function (elm, attrs) {
            // After flattening, Angular will still have the first element
            // bound to the old scope, so we create a temporary marker 
            // to store it
            elm.prepend('<div style="display: none"></div>');

            // Flatten (unwrap) the parent
            var children = elm.children();
            elm.replaceWith(children);

            // Add the ng-if to the children
            children.attr('ng-if', attrs.ngBatchIf);

            return {
                post: function postLink(scope, elm) {
                    // Now remove the temporary marker
                    elm.remove();
                }
            }
        }
    }
})

Угловой Код:

<div id="div1" ng-batch-if="checked">
    <div id="div2">ABC</div>
    <div id="div3">KLM</div>
    <div id="div4">PQR</div>
</div>

Созданный HTML:

<div id="div2" ng-if="checked">ABC</div>
<div id="div3" ng-if="checked">KLM</div>
<div id="div4" ng-if="checked">PQR</div>

Скрипка: http://jsfiddle.net/o166xg0s/4/

Комментарии (0)

Здесь'ов угловой 1.21 решение:

HTML-код:

<div ng-app="app" ng-controller="ctrl">
    <div ng-iff="checked" id="div1">
        <div id="div2">ABC</div>
        <div id="div3">KLM</div>
        <div id="div4">PQR</div>
    </div>
    Toggle Check
</div>

На JavaScript:

angular.module('app', []).
controller('ctrl', function ($scope) {
    $scope.checked = true;

    $scope.toggleCheck = function () {
        $scope.checked = !$scope.checked;
    };
}).
directive('ngIff', function ($compile) {
    return {
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                    var bindingElem = iElement.attr('ng-iff');
                    var children = iElement.children();

                    angular.forEach(children,function(c){
                        angular.element(c).attr('ng-if',bindingElem);
                    });

                    $compile(children)(scope, function(newElem){
                        iElement.replaceWith(newElem);
                    });
                }
            };
        }
    };
});

[JSFIDDLE][1].

Комментарии (0)

Я не понимаю, почему вы не хотите использовать родительский div, но это было бы хорошее решение, если у вас +20 ДИВС:

В формате HTML

   <div ng-repeat="div in divs" ng-if="checked" id="{{div.name}}">{{div.content}}</div>

Яш

app.controller('myCtrl', function($scope) {
    $scope.checked = true;
    $scope.divs = {
         {'name': 'div2', content:'ABC'},
         {'name': 'div3', content:'KLM'},
         {'name': 'div4', content:'PQR'}
    }
});
VinEzhu
Редактировал ответ 16-го июня 2014 в 8:36
Комментарии (2)

Попробуйте это:- http://jsfiddle.net/adiioo7/9mgTS/1/

див1 является родительским контейнером для див2,3 дивизиона,4 дивизиона, если вы Don'т хотите, див1 в выходной поток HTML используйте это:-

<div ng-app="App">Click me:
    <input type="checkbox" ng-model="checked" ng-init="checked=true" />
    <br/>Show when checked:
    <div class="div2" ng-if="checked">ABC</div>
    <div class="div3" ng-if="checked">KLM</div>
    <div class="div4" ng-if="checked">PQR</div>
</div>

Редактировать:-

С помощью угловых JS и jQuery: от HTTP://jsfiddle.сеть/adiioo7/9mgTS/3/

Присвоить общий класс (например класса MyClass), чтобы все элементы, относящиеся к этой группе.

Яш:-

angular.module('App', []);

function myController($scope) {
    $scope.change = function () {
        angular.element(".myClass").toggle();
    };
}

HTML-код:-

<div ng-app="App" ng-Controller="myController">Click me:
    <input type="checkbox" ng-change="change()" ng-model="checked" ng-init="checked=true" />
    <br/>Show when checked:
    <div id="div2" class="myClass">ABC</div>
    <div id="div3" class="myClass">KLM</div>
    <div id="div4" class="myClass">PQR</div>
</div>
Aditya Singh
Редактировал ответ 1-го ноября 2013 в 3:38
Комментарии (6)

Похоже, старый вопрос, но у меня есть аналогичное требование 

<div ng-if="checked" id="div1">
      <div id="div2">ABC</div>
      <div id="div3">KLM</div>
      <div id="div4">PQR</div>
</div>

Я такой 


      <div id="div2">ABC</div>
      <div id="div3">KLM</div>
      <div id="div4">PQR</div>

где тег - любое имя, которое не является HTML-элемент, пока он не нарушает макет, это работает для меня

Комментарии (0)