AngularJS-HTML 요소없이 ng-if를 사용하는 방법
AngularJS에게 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/ . 나는 #div1
HTML에서 원하지 않는다 . 난 그냥 원하는 #div2,3,4
경우 checked
입니다 true
.
가능한 해결책은 모든 자식 요소에 ng-if를 추가하는 것이지만 저는 이것을 원하지 않습니다.
현재 문서화되지 않은 한 쌍의 지시문 ng-if-start
및 ng-if-end
을 사용할 수 있습니다. 문서화 된 지시문 ng-repeat-start
과ng-repeat-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>
처음 4 개 li
는 표시되고 마지막 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);
});
}
};
}
};
});
JSFIDDLE .
부모 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'}
}
});
이것을 시도하십시오 : -http : //jsfiddle.net/adiioo7/9mgTS/1/
div1
is the parent container for div2,div3,div4
, if you don't want div1
in the output html use this:-
<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>
EDIT:-
Using angular js and jQuery:-http://jsfiddle.net/adiioo7/9mgTS/3/
Assign a common class (example myClass
) to all elements pertaining to that group.
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>
Seems to be a old question but I got similar requirement
<div ng-if="checked" id="div1">
<div id="div2">ABC</div>
<div id="div3">KLM</div>
<div id="div4">PQR</div>
</div>
I managed like this
<mytag ng-if="checked" id="div1">
<div id="div2">ABC</div>
<div id="div3">KLM</div>
<div id="div4">PQR</div>
</mytag>
where mytag is just any name which is not a html element as long as it does not disturb the layout, this works for me
ReferenceURL : https://stackoverflow.com/questions/19721395/angularjs-how-to-use-ng-if-without-html-element
'IT TIP' 카테고리의 다른 글
C—는 LLVM과 어떻게 비교됩니까? (0) | 2021.01.08 |
---|---|
DNS는 domain.com을 www.domain.com으로 리디렉션합니다. (0) | 2021.01.08 |
Gmail 용 Chrome 확장 프로그램을 개발하는 방법은 무엇입니까? (0) | 2021.01.08 |
사전과 같지만 값이없는 C # 데이터 구조 (0) | 2021.01.07 |
MySQL-조건부 외래 키 제약 (0) | 2021.01.07 |