Html 요소 없이 AngularJs ng-repeat
현재 이 코드를 사용하여 목록을 렌더링하고 있습니다.
<ul ng-cloak>
<div ng-repeat="n in list">
<li><a href="{{ n[1] }}">{{ n[0] }}</a></li>
<li class="divider"></i>
</div>
<li>Additional item</li>
</ul>
「」, 「」는<div>
일부 브라우저에서는 요소가 매우 작은 렌더링 결함을 일으킵니다.컨테이너를 하지 않고 수 있는 알고 싶습니다.div ng-repeat은 ng-repeat으로 할 수 .
Andy Joslin이 말한 것처럼 그들은 ng-repeats에 기반한 코멘트 작업을 하고 있지만 브라우저에 문제가 너무 많았던 것 같다.다행히 AngularJS 1.2는 새로운 디렉티브에서 하위 요소를 추가하지 않고 반복할 수 있는 내장 지원 기능을 추가했습니다.ng-repeat-start
★★★★★★★★★★★★★★★★★」ng-repeat-end
.
다음은 부트스트랩 페이지 수를 추가하는 간단한 예입니다.
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li ng-repeat-start="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
<li ng-repeat-end class="divider"></li>
<li>
<a href="#">»</a>
</li>
</ul>
여기서 완전한 작업 예를 찾을 수 있습니다.
John Lindquist는 또한 그의 훌륭한 egghead.io 페이지에 이것에 대한 비디오 튜토리얼을 가지고 있다.
녹아웃JS 컨테이너리스 바인딩 구문
주세요:Knocko는 JS에 할 수 있는 한 옵션을 제공합니다.foreach
「4」의 「4」의 「주 4」에서되고 있는 .foreach
제본 매뉴얼을 참조하십시오.http://knockoutjs.com/documentation/foreach-binding.html
녹아웃 문서의 예시와 같이 녹아웃으로 바인딩을 쓸 수 있습니다.JS는 다음과 같습니다.
<ul>
<li class="header">Header item</li>
<!-- ko foreach: myItems -->
<li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->
</ul>
내 생각에 앵글은 좀 아쉬운 것 같아JS는 이런 유형의 구문을 제공하지 않습니다.
앵글의 도 ng-repeat-start
★★★★★★★★★★★★★★★★★」ng-repeat-end
에서 JS를 해결하는 ng-repeat
문제, 제가 발견한 샘플은 그의 (도움이 되는) 답변에 게재된 jmagnusson 유형입니다.
<li ng-repeat-start="page in [1,2,3,4,5]"><a href="#">{{page}}</a></li>
<li ng-repeat-end></li>
이 구문을 보고 내가 생각한 것은, 「정말?」입니다.Angular는 왜 내가 관여하고 싶지 않은 추가 마크업을 강요하는가? Knockout은 왜 그렇게 쉬운가?그러나 그 후 jagnusson의 답변에 hitautodestruct의 코멘트는 나를 궁금하게 만들기 시작했다: ng-repeat-start와 ng-repeat-end는 각각 다른 태그로 생성되고 있는가?
★★★★★★★★★★★★★★를 보다 깔끔하게 사용하는 방법ng-repeat-start
★★★★★★★★★★★★★★★★★」ng-repeat-end
하면서 hitautodestruct를 했습니다.ng-repeat-end
다른 태그에 붙이는 것은 거의 사용하지 않는 요소를 생성하기 때문에 대부분의 경우 하고 싶지 않습니다.이 경우,<li>
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★Bootstrap 3의 페이지화된 리스트는 불필요한 아이템을 생성하지 않은 것처럼 보이도록 리스트 아이템을 스타일링합니다만, 생성된html을 조사하면 아이템이 거기에 있습니다.
다행히 보다 깔끔한 솔루션과 보다 짧은 양의 html을 사용하기 위해 많은 작업을 할 필요는 없습니다.이 선언을 이 html 태그에 붙이기만 하면 됩니다.
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li ng-repeat-start="page in [1,2,3,4,5]" ng-repeat-end><a href="#"></a></li>
<li>
<a href="#">»</a>
</li>
</ul>
이를 통해 3가지 이점이 있습니다.
- 쓸 html 태그 감소
- Angular에 의해 불필요한 빈 태그가 생성되지 않음
- 반복할 배열이 비어 있는 경우 태그는
ng-repeat
생성되지 않고 동일한 이점을 제공합니다. 녹아웃의 컨테이너리스 바인딩은 이 점에 대해 사용자에게 제공합니다.
하지만 아직 더 깨끗한 방법이 있어
Angular에 대한 이 문제에 대한 github의 코멘트를 자세히 검토한 후 https://github.com/angular/angular.js/issues/1891,를 방문하십시오.
사용할 필요가 없습니다.ng-repeat-start
그리고.ng-repeat-end
같은 이점을 얻을 수 있습니다.대신, jmagnusson의 예를 다시 들자면 다음과 같이 할 수 있습니다.
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li ng-repeat="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
<li>
<a href="#">»</a>
</li>
</ul>
사용 시기ng-repeat-start
그리고.ng-repeat-end
? 각도 설명서에 따르면
...하나의 부모 요소 대신 일련의 요소...
이제 그만 말해, 예를 좀 보여 줘!
좋습니다. 이 jsbin은 사용했을 때와 사용하지 않았을 때의 5가지 예를 소개합니다.ng-repeat-end
같은 태그로.
http://jsbin.com/eXaPibI/1/
ngRepeat은 충분하지 않을 수 있지만 이를 커스텀 디렉티브와 조합할 수 있습니다.jQuery를 사용해도 괜찮다면 구분선 항목을 코드에 추가하는 작업을 위임할 수 있습니다.
<li ng-repeat="item in coll" so-add-divide="your exp here"></li>
이러한 간단한 지시어는 속성값을 필요로 하지 않지만 인덱스, 길이 등에 따라 구분선을 조건부로 추가하는 등 많은 가능성을 제공할 수 있습니다.
최근 스팬과 이미지의 임의의 컬렉션을 반복해야 하는 것과 같은 문제가 있었습니다.스팬과 이미지의 주위에 요소를 두는 것은 선택사항이 아닙니다.단, 간단한 해결책이 있습니다.즉, "null" 디렉티브를 작성하는 것입니다.
app.directive("diNull", function() {
return {
restrict: "E",
replace: true,
template: ""
};
});
그런 다음 해당 요소에서 반복을 사용할 수 있습니다. 여기서 element.url은 해당 요소의 템플릿을 가리킵니다.
<di-null ng-repeat="element in elements" ng-include="element.url" ></di-null>
이렇게 하면 주위에 컨테이너가 없는 임의의 수의 템플릿이 반복됩니다.
메모: 음, 렌더링할 때 di-null 요소를 삭제했다고 맹세할 수 있었지만, 다시 확인해도 레이아웃 문제는 해결되지 않습니다. 큐라이서 및 호기심...
실제로 효과가 있는 해결책에 대해
html
<remove ng-repeat-start="itemGroup in Groups" ></remove>
html stuff in here including inner repeating loops if you want
<remove ng-repeat-end></remove>
angular.direction을 추가합니다.
//remove directive
(function(){
var remove = function(){
return {
restrict: "E",
replace: true,
link: function(scope, element, attrs, controller){
element.replaceWith('<!--removed element-->');
}
};
};
var module = angular.module("app" );
module.directive('remove', [remove]);
}());
간단한 설명을 위해
는 ng-private에 .<remove>
ng-contract-start/ng-contract-end뿐만 .
는 "Decession remove"를 배치합니다.<remove>
에는 「」가 붙어 있습니다.<!--removed element-->
코멘트 디렉티브의 제한은 있습니다만, ngRepeat는 (반복할 요소가 필요하기 때문에) 지원하지 않습니다.
앵글팀이 댓글 작업한다고 한 것 같은데 잘 모르겠어요.레포에서 발행해 주세요.http://github.com/angular/angular.js
Bootstrap을 사용하는 경우 유효한 HTML을 얻기 위해 Angular 마법의 방법은 없습니다.그러면 li.divider를 추가하는 것과 같은 효과를 얻을 수 있습니다.
클래스 만들기:
span.divider {
display: block;
}
이제 코드를 다음과 같이 변경합니다.
<ul ng-cloak>
<li div ng-repeat="n in list">
<a href="{{ n[1] }}">{{ n[0] }}</a>
<span class="divider"></span>
</li>
<li>Additional item</li>
</ul>
언급URL : https://stackoverflow.com/questions/12857714/angularjs-ng-repeat-with-no-html-element
'programing' 카테고리의 다른 글
변경에 대한 AngularJS $watch 루트 범위 변수 (0) | 2023.03.21 |
---|---|
Jquery asp.net 버튼클릭 이벤트 via ajax (0) | 2023.03.21 |
연결 정보 wordpress - localhost 설치 (0) | 2023.03.21 |
보기를 다시 렌더링하지 않고 각도 JS에서 URL 업데이트 (0) | 2023.03.21 |
모든 AJAX 콜을 가로채시겠습니까? (0) | 2023.03.21 |