ng-timeout 디렉티브는 (키, 값)을 사용할 때 데이터를 정렬합니다.
데이터 내의 ng-disc = "(key, value)"와 같은 코드가 있습니다.컨트롤러 내:
$scope.Dates = {"Today":"30",
"This Week":"42",
"This Month": "Oct",
"This Quarter" : "Bad",
"This Year" : 2013
}
및 ng-internal 명령어
<div ng-repeat="(key,value) in Dates">
{{key}} ==> {{value}}
</div>
출력은 다음과 같이 정렬되어 있습니다.
This Month ==> Oct
This Quarter ==> Bad
This Week ==> 42
This Year ==> 2013
Today ==> 30
코드에서 키를 사용하고 싶기 때문에 이 정렬(이상한)을 해제하는 방법..구글 그룹을 확인했는데, 두 배열을 사용하기 위한 바이올린이 있었는데, 그 중 하나는 키 값을 저장하는 것이었습니다.http://jsfiddle.net/Saulzar/puhML/3/b. 이 접근방식을 사용하고 싶지 않습니다.
이것은 각이 아닌 JavaScript의 제한입니다.
4.3.3 물체는 유형 물체의 구성원이다.각 속성에는 원시 값, 개체 또는 함수가 포함되어 있는 무질서한 속성 집합입니다.객체의 속성에 저장된 함수를 메서드라고 합니다.
ECMAScript 언어 사양에서
속성 [...]을(를) 열거하는 [...] 순서가 지정되지 않았습니다.
Angular는 적어도 일종의 지속적 동작을 제공하기 위해 개체 키를 명시적으로 정렬합니다.
회피책은 추출된 키를 반복하는 것입니다.
<div ng-repeat="key in keys(Dates)">
{{key}} ==> {{Dates[key]}}
</div>
$scope.keys = function(obj){
return obj? Object.keys(obj) : [];
}
$scope.Dates = {
"Today":"30",
"This Week":"42",
"This Month": "Oct",
"This Quarter" : "Bad",
"This Year" : 2013
};
편집: 버그를 신청했습니다.+1로 해 주세요.
ECMAScript는 키의 반복 순서를 지정하지 않지만, 모든 주요 브라우저는 링크된 해시 맵(순서 유지)으로 객체를 구현하며, 많은 js 라이브러리는 이 동작에 의존하기 때문에 우리는 이 동작에 익숙해져 있고 거의 변경되지 않습니다.
반면 각도(전혀 예상하지 못한)는 알파벳 순으로 정렬합니다.소스코드는 제가 직접 확인했는데, 거기에 하드코드가 되어 있어서 언젠가 해결이 되면 좋을 것 같아요.그렇지 않으면(k, v) in obj
기능은 전혀 쓸모가 없습니다.
결과를 배열이라고 생각하는 각도로 속이는 것은 전혀 도움이 되지 않습니다.그러면 숫자 키가 필요하기 때문입니다.
이 경우 getter를 길이로 정의할 수 있습니다.
Object.defineProperty(yourResultObjectOrPrototype, 'length', {
get: function(){
return Object.keys(this).length;
}
})
그렇지 않으면 개체를 반복하는 필터가 필요합니다.for(var k in obj)
결과를 배열에 저장합니다.
실제로 정답이 있습니다. 정렬이 아니라 orderBy라고 합니다.
https://docs.angularjs.org/api/ng/filter/orderBy
{{ orderBy_expression | orderBy : expression : reverse}}
<tr ng-repeat="friend in friends | orderBy:'-age'">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
리스트가 리스트여야 하며 설정 순서를 알기 위해 인덱스가 필요할 수 있습니다.
$scope.Dates = [{index:1, "Today":"30"},
{index:2,"This Week":"42"},
{index:3,"This Month": "Oct"},
{index:4,"This Quarter" : "Bad"},
{index:5,"This Year" : 2013}]
그리고 나서.
<tr ng-repeat="(key, value) in Dates | orderBy:'index'">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
자세한 내용은 이쪽:
이전에는 ngRepeat을 사용하여 오브젝트 속성 상에서 반복할 때 키를 알파벳 순서로 정렬함으로써 항목의 순서가 일관되게 유지되었습니다.
항목 에 따라 .이러한 순서는 한 후 반환되는 달라집니다.이 순서는 오브젝트를 사용한 반복에서 반환된 순서에 따라 달라집니다.
for key in obj
구문을 사용합니다.브라우저는 일반적으로 정의된 순서대로 키를 제공하는 전략을 따르는 것 같습니다.
ng-repeat으로 이렇게 키별로 오브젝트를 알파벳 순으로 정렬할 수 있었습니다!
내 컨트롤러:
$scope.build_config = {
build_path : "/x/eng/build",
arch : "x86",
variant : "debug",
run_method : "boot",
};
$scope.get_keys = function (obj) {
if (obj)
return Object.keys(obj);
};
내 HTML에서:
<tr ng-repeat="key in get_keys(build_config) | orderBy:'toString()'">
<td> {{key}} </td>
<td> {{selected.build_config[key]}} </td>
</tr>
Object.keys는 주문을 예약하지 않습니다.참조: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
// 임의 키 순서를 가진 배열과 유사한 개체
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(an_obj)); // console: ['2', '7', '100']
나는 그것을 오브젝트 배열로 변환한다.
$scope.Dates = [
{ id: "Today", value:"30" },
{ id: "This Week", value:"42" },
{ id: "This Month", value: "Oct" },
{ id: "This Quarter", value : "Bad" },
{ id: "This Year", value : 2013 }
];
<li ng-repeat="date in Dates">{{date.id}} -> {{date.value}}</li>
http://jsfiddle.net/2hqew68k/1/
ngRepeat에 대한 Angular의 설명에 따르면
https://docs.angularjs.org/api/ng/directive/ngRepeat#iterating-over-object-properties
사물의 속성을 반복하기 위해 그것을 사용할 때, 그것은 작동하지 않을 것이다.
기본 제공 필터 orderBy 및 필터는 개체와 함께 사용할 수 없으며 개체와 함께 사용할 경우 오류가 발생합니다.
이 경우 오브젝트와 그 속성 대신 어레이를 사용하는 것이 최선의 해결책이라고 생각합니다.따라서 예를 들어 개체의 속성을 반복하고 새 배열로 푸시하여 배열로 변환하기만 하면 됩니다.결국, 나는 그것이 많은 속성을 가진 하나의 오브젝트가 아니라 컬렉션에 대한 자연스러운 선택이라고 생각한다.
언급URL : https://stackoverflow.com/questions/19676694/ng-repeat-directive-sort-the-data-when-using-key-value
'programing' 카테고리의 다른 글
jQuery ui 날짜 선택기(Angularjs 포함) (0) | 2023.03.23 |
---|---|
VIM에서 저장 시 JSON을 자동 포맷하는 방법 (0) | 2023.03.23 |
.py 파일의 MIME 유형은 무엇입니까? (0) | 2023.03.23 |
gson을 사용한 객체의 특정 JSON 필드 역직렬화 (0) | 2023.03.18 |
c#을 사용한 일반적인 Json 평탄화 (0) | 2023.03.18 |