AngularJS - HTML 요소 없이 ng-if를 사용하는 방법

AngularJS - HTML 요소 없이 ng-if를 사용하는 방법

Angular에게 말할 방법은 없을까?JS는 ng-if 디렉티브가 있는 최상위 HTML 요소를 표시하지 않습니다.어린이 콘텐츠만 표시하기 위해 angular를 원합니다.

각도 코드:

    <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/ 를 참조해 주세요.나는 원하지 않는다.#div1HTML로. 난 그냥#div2,3,4한다면checked이true.

가능한 솔루션은 모든 자 요소에 ng-if를 추가하는 것입니다만, 저는 이것을 하고 싶지 않습니다.

현재 문서화되어 있지 않은 지시문이 있는데ng-if-start그리고.ng-if-end사용할 수 있습니다.이러한 명령어는 문서화된 명령어 및 지시어와 유사하게 동작하며, 필요에 따라 장치 테스트를 볼 수 있습니다.

예를 들어, 다음과 같은 코드가 지정됩니다.

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

첫 번째 네 개lis가 표시되고 마지막 4개가 표시됩니다.li은 숨겨집니다.

다음은 CodePen의 라이브 예시입니다.http://codepen.io/anon/pen/PqEJYV

또 있다ng-show-start그리고.ng-show-end원하는 대로 작동하도록 지시합니다.

커스텀 디렉티브를 작성할 수 있는 경우는, ng-if 를 프로그램에 의해서 아이에게 적용하고, 프로세스중에 DOM 를 평탄하게 할 수 있습니다.

지시 코드:

.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/

다음은 Angular 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>
    <button ng-click="toggleCheck()">Toggle Check</button>
</div>

자바스크립트:

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);
                    });
                }
            };
        }
    };
});

JSFIDLE

왜 부모 div를 사용하지 않는지 이해할 수 없지만 +20 div가 있는 경우 이 방법이 좋습니다.

HTML

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

JS

app.controller('myCtrl', function($scope) {
    $scope.checked = true;
    $scope.divs = {
         {'name': 'div2', content:'ABC'},
         {'name': 'div3', content:'KLM'},
         {'name': 'div4', content:'PQR'}
    }
});

오래된 질문인 것 같지만 비슷한 요구를 받았다.

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

나는 이렇게 해냈다.

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

mytag는 레이아웃을 방해하지 않는 한 HTML 요소가 아닌 이름일 뿐입니다.

시험해 보세요:- http://jsfiddle.net/adiioo7/9mgTS/1/

div1의 부모 컨테이너입니다.div2,div3,div4원하지 않으면div1출력 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>

편집:-

angular js 및 jQuery 사용:-http://jsfiddle.net/adiioo7/9mgTS/3/

공통 클래스 할당(예)myClass)를 참조해 주세요.

JS:-

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>

언급URL : https://stackoverflow.com/questions/19721395/angularjs-how-to-use-ng-if-without-html-element