angularjs - ng-repeat : JSON 어레이 오브젝트로부터의 액세스키와 값
아래와 같이 JSON Array 오브젝트가 있습니다.
$scope.items =
[
{Name: "Soap", Price: "25", Quantity: "10"},
{Name: "Bag", Price: "100", Quantity: "15"},
{Name: "Pen", Price: "15", Quantity: "13"}
];
angular.js에서 ng-repeat을 사용하여 키와 값을 따로 가져오고 싶습니다.아래 코드를 시도했지만 작동하지 않습니다.
<tr ng-repeat="(key, val) in items">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
제 생각에는 교정기 '['와 ']'에 문제가 있는 것 같아요.이 문제를 어떻게 해결할 수 있는지 제안해 주실 수 있나요?
편집 완료:
답장 감사합니다.당신의 코드를 시험해 봤는데 작동해요.그러나 나의 진짜 요구는 아래와 같이 상품을 전시하는 것입니다.
Name Price Quantity
Soap 25 10
Bag 100 15
Pen 15 13
조금 쓰고 있어요.<tr>그리고.<td>html로 지정합니다.화면에 아무것도 표시되지 않습니다.코드는 다음과 같습니다.
<table>
<tr ng-repeat="item in items">
<tr ng-repeat="(key, val) in item">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</tr>
</table>
나는 그것을 알고 있습니다.<tr>다른 사람의 내면에<tr>는 html에서 허용되지 않습니다.최선을 다했어요.하지만 운이 없다.당신이 이 일을 도와주시면 감사하겠습니다.잘 부탁드립니다.
오브젝트 배열이 있기 때문에ng-repeat두 번, 예를 들어:
<ul ng-repeat="item in items">
<li ng-repeat="(key, val) in item">
{{key}}: {{val}}
</li>
</ul>
예: http://jsfiddle.net/Vwsej/
편집:
개체의 속성 순서는 보장되지 않습니다.
<table>
<tr>
<th ng-repeat="(key, val) in items[0]">{{key}}</th>
</tr>
<tr ng-repeat="item in items">
<td ng-repeat="(key, val) in item">{{val}}</td>
</tr>
</table>
예: http://jsfiddle.net/Vwsej/2/
방금 Angular를 체크하기 시작했는데(그래서 더 최적의 방법이 있을 거라고 확신하고 있습니다), ng-repeat의 예를 찾다가 이 질문을 하게 되었습니다.
Poser(업데이트 포함)에 의한 요건:
"...하지만 저의 진짜 요구는 아래와 같이 상품을 전시하는 것입니다."
(그리고 심플한) 현실세계처럼 보였기 때문에, 그것을 회전시켜, 정확하게 원하는 구조를 얻을 수 있다고 생각했습니다.
angular.module('appTest', [])
.controller("repeatCtrl", function($scope) {
$scope.items = [{
Name: "Soap",
Price: "25",
Quantity: "10"
}, {
Name: "Bag",
Price: "100",
Quantity: "15"
}, {
Name: "Pen",
Price: "15",
Quantity: "13"
}];
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="appTest">
<section ng-controller="repeatCtrl">
<table>
<thead>
<tr ng-repeat="item in items | limitTo:1">
<th ng-repeat="(key, val) in item">
{{key}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td ng-repeat="(key, val) in item">
{{val}}
</td>
</tr>
</tbody>
</table>
</section>
</body>limitTo:(n) 필터가 키입니다.ng-repeat을 여러 번 반복하는 것이 최적의 방법인지는 아직 잘 모르겠지만, 현재 다른 대안을 생각할 수 없습니다.
솔루션 데이터가 있는 json 개체가 있습니다.
[{"name":"Ata","email":"test@test1.com"}]
다음 방법을 사용하여 ng-repeat을 반복하고 목록 대신 테이블 형식을 사용할 수 있습니다.
<div class="container" ng-controller="fetchdataCtrl">
<ul ng-repeat="item in numbers">
<li>
{{item.name}}: {{item.email}}
</li>
</ul>
</div>
이거 먹어봐..
<tr ng-repeat='item in items'>
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td>{{item.Quantity}}</td>
</tr>
언급URL : https://stackoverflow.com/questions/21697695/angularjs-ng-repeat-access-key-and-value-from-json-array-object
'source' 카테고리의 다른 글
| 각각 angularjs로 된 jquery의 대체 방법은 무엇입니까? (0) | 2023.03.23 |
|---|---|
| AJAX가 브라우저 로드 표시기를 트리거하도록 하는 방법 (0) | 2023.03.23 |
| node_modules/rxjs/internal/types.d.ts(81,44): Angular 6 설치 후 오류 TS1005: ';' 예상 오류 (0) | 2023.03.23 |
| !react에서 중요한 인라인 스타일 (0) | 2023.03.23 |
| T-SQL에 대한 GeSHI 구문 강조 표시 개선 (0) | 2023.03.23 |