html 요소 없이 ng-repeat을 사용하는 방법
사용할 필요가 있다ng-repeat(θθ)JS 내의 합니다.JS)를 사용합니다.
복잡한 점은 배열의 각 요소가 테이블의 1행, 2행 또는 3행 중 하나로 변환된다는 것입니다.
html의 유효한 html을 수 .ng-repeat、 element 、 is is 、 is is is is is is is 사이에 되지 않기 때문에 됩니다.<tbody> ★★★★★★★★★★★★★★★★★」<tr>.
를 들어 "ng-repeat"에서 <span>뭇매를 맞다
<table>
<tbody>
<span>
<tr>...</tr>
</span>
<span>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</span>
<span>
<tr>...</tr>
<tr>...</tr>
</span>
</tbody>
</table>
잘못된 html입니다.
하지만 내가 생성되어야 할 것은:
<table>
<tbody>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
여기서 첫 번째 행은 첫 번째 배열 요소에 의해 생성되고, 다음 세 번째 행은 두 번째 배열 요소에 의해 생성되며, 다섯 번째와 여섯 번째 행은 마지막 배열 요소에 의해 생성됩니다.
어떻게 하면 렌더링 중에 바인드되어 있는html 요소가 '소거'되도록 ng-repeat을 사용할 수 있을까요?
아니면 다른 해결책이 있을까요?
설명:생성된 구조는 다음과 같습니다.각 배열 요소는 1 ~3행의 테이블을 생성할 수 있습니다.답은 어레이 요소당 0~n 행을 지원하는 것이 이상적입니다.
<table>
<tbody>
<!-- array element 0 -->
<tr>
<td>One row item</td>
</tr>
<!-- array element 1 -->
<tr>
<td>Three row item</td>
</tr>
<tr>
<td>Some product details</td>
</tr>
<tr>
<td>Customer ratings</td>
</tr>
<!-- array element 2 -->
<tr>
<td>Two row item</td>
</tr>
<tr>
<td>Full description</td>
</tr>
</tbody>
</table>
AngularJS에서는 AngularJS 1.2라는 ng-repeat-start당신이 원하는 대로 할 수 있어요사용 방법에 대한 설명은 이 질문의 답변을 참조하십시오.
업데이트: Angular 1.2+ 를 사용하는 경우 ng-repeat-start 를 사용합니다.@jmagnusson의 답변을 참조하십시오.
그렇지 않으면 ng-repeat을 tbody에 붙이는 건 어때?(AFAIK, 1개의 테이블에 복수의 <tbody>를 배치해도 상관없습니다).
<tbody ng-repeat="row in array">
<tr ng-repeat="item in row">
<td>{{item}}</td>
</tr>
</tbody>
ng 를 는, ng > 1.2 를 .ng-repeat-start/end불필요한 태그를 생성하지 않습니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
angular.module('mApp', []);
</script>
</head>
<body ng-app="mApp">
<table border="1" width="100%">
<tr ng-if="0" ng-repeat-start="elem in [{k: 'A', v: ['a1','a2']}, {k: 'B', v: ['b1']}, {k: 'C', v: ['c1','c2','c3']}]"></tr>
<tr>
<td rowspan="{{elem.v.length}}">{{elem.k}}</td>
<td>{{elem.v[0]}}</td>
</tr>
<tr ng-repeat="v in elem.v" ng-if="!$first">
<td>{{v}}</td>
</tr>
<tr ng-if="0" ng-repeat-end></tr>
</table>
</body>
</html>한 점: "에의 경우: " " " 입니다.ng-repeat-start ★★★★★★★★★★★★★★★★★」ng-repeat-end 설정하다ng-if="0" 됩니다(「노코즈」의 를 사용합니다).<!--...-->이치노
컨트롤러 내의 데이터를 평평하게 할 수 있습니다.
function MyCtrl ($scope) {
$scope.myData = [[1,2,3], [4,5,6], [7,8,9]];
$scope.flattened = function () {
var flat = [];
$scope.myData.forEach(function (item) {
flat.concat(item);
}
return flat;
}
}
HTML에서 다음을 수행합니다.
<table>
<tbody>
<tr ng-repeat="item in flattened()"><td>{{item}}</td></tr>
</tbody>
</table>
위의 내용은 맞지만 일반적인 답변으로는 충분하지 않습니다.ng-repeat은 ng-repeat을 nest로 할 필요가 있었지만, 같은 html 레벨에 머물러야 했습니다.즉, 같은 부모에 요소를 쓰는 것을 의미합니다.태그 배열에는 태그 배열도 있는 태그가 포함되어 있습니다.그것은 사실 나무입니다.
[{ name:'name1', tags: [
{ name: 'name1_1', tags: []},
{ name: 'name1_2', tags: []}
]},
{ name:'name2', tags: [
{ name: 'name2_1', tags: []},
{ name: 'name2_2', tags: []}
]}
]
그래서 결국 이렇게 된 겁니다.
<div ng-repeat-start="tag1 in tags" ng-if="false"></div>
{{tag1}},
<div ng-repeat-start="tag2 in tag1.tags" ng-if="false"></div>
{{tag2}},
<div ng-repeat-end ng-if="false"></div>
<div ng-repeat-end ng-if="false"></div>
시작 및 끝 부분을 숨기는 ng-if="false"에 주의하십시오.
인쇄해야 합니다.
name1, name1_1, name1_2, name2, name2_1, name2_2,
코멘트를 하고 싶지만, 아직 평판이 좋지 않습니다.그래서 이 문제를 해결할 수 있는 다른 솔루션을 추가합니다.@bmoeskau가 이 문제를 해결하기 위해서는 기껏해야 해프닝이 필요하다는 발언을 반박하고 싶습니다.또, 이 투고는 2년이 지났지만, 최근 논의에서 나온 것이므로, 제 자신의 의견을 덧붙이고 싶습니다.
@btford가 지적한 바와 같이, 당신은 재귀 구조를 목록으로 바꾸려고 하는 것 같기 때문에 먼저 그 구조를 목록으로 정리해야 합니다.그의 솔루션은 그렇게 하지만 템플릿 내에서 함수를 호출하는 것은 부적절하다는 의견이 있습니다.만약 그것이 사실이라면 (솔직히 잘 모르겠지만) 명령어가 아닌 컨트롤러에서 함수를 실행하면 되지 않을까요?
어느 쪽이든 html에는 목록이 필요하기 때문에 html을 렌더링하는 범위에는 해당 목록이 있어야 합니다.컨트롤러 내부의 구조를 평평하게 하기만 하면 됩니다.$syslog.rows 배열이 있으면 하나의 단순한 ng-syslog로 테이블을 생성할 수 있습니다.해킹도, 미숙함도 없고, 단순히 작동 방식대로만 설계되어 있습니다.
앵글 디렉티브는 기능이 부족하지 않습니다.단순히 유효한 html을 쓰도록 강요할 뿐입니다.동료도 @bmoeskau를 인용하여 앵글 템플릿/렌더링 기능에 대한 비판을 지지했습니다.정확한 문제를 조사했을 때, 그는 단순히 열기 태그를 생성하고 다른 곳에서 닫기 태그를 생성하는 것을 원했습니다.문자열에서 html을 얻던 옛날처럼..그렇지? 아니야.
구조를 리스트로 정리하는 방법에 대해서는, 또 다른 해결책이 있습니다.
// assume the following structure
var structure = [
{
name: 'item1', subitems: [
{
name: 'item2', subitems: [
],
}
],
}
];
var flattened = structure.reduce((function(prop,resultprop){
var f = function(p,c,i,a){
p.push(c[resultprop]);
if (c[prop] && c[prop].length > 0 )
p = c[prop].reduce(f,p);
return p;
}
return f;
})('subitems','name'),[]);
// flattened now is a list: ['item1', 'item2']
하위 항목이 있는 모든 트리 같은 구조에서 작동합니다.속성 대신 아이템 전체를 원하는 경우 평탄화 기능을 더욱 줄일 수 있습니다.
도움이 됐으면 좋겠네요
실제로 효과가 있는 해결책에 대해
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-module은 그 자체를<remove>ng-syslog-start/ng-syslog-end를 사용했기 때문에 요소뿐만 아니라 html 블록도 루프합니다.
는 "Decession remove"를 배치합니다.<remove>에는 「」가 붙어 있습니다.<!--removed element-->
<table>
<tbody>
<tr><td>{{data[0].foo}}</td></tr>
<tr ng-repeat="d in data[1]"><td>{{d.bar}}</td></tr>
<tr ng-repeat="d in data[2]"><td>{{d.lol}}</td></tr>
</tbody>
</table>
이것은 유효하다고 생각합니다. :)
언급URL : https://stackoverflow.com/questions/11490968/how-to-use-ng-repeat-without-an-html-element
'programing' 카테고리의 다른 글
| 비동기 컨스트럭터가 TypeScript에서 기능합니까? (0) | 2023.03.21 |
|---|---|
| React.js에서 Google 글꼴을 사용하는 방법 (0) | 2023.03.21 |
| 개체 대신 UUID 사용MongoDB의 ID (0) | 2023.03.21 |
| 인라인 스타일 반응 - 스타일 프로포드는 스타일 속성에서 문자열이 아닌 값으로 매핑되어야 합니다. (0) | 2023.03.21 |
| 페이지 분할 내부: 기능하지 않음 (0) | 2023.03.16 |