Orderby는 ng-repeat의 dict 구문을 사용하지 않습니다.
사전 스타일의 구문에 ng-repeat을 사용하여 키 값에 순서를 적용하려고 합니다.
(key, value) in something | orderBy:'key'
OrderBy가 예상대로 작동하지 않는 것 같습니다.
예: http://jsfiddle.net/mhXuW/
순서 지정할 매개 변수는 개체 배열의 속성 이름과 일치해야 합니다.
데이터는 다음과 같아야 합니다.
$scope.list2 = [ { id:"2013-01-08T00:00:00", name:'Joe'},
{ id:"2013-01-09T00:00:00", name:'Sue'}];
그런 다음 다음과 같은 필터가 작동합니다.
<div ng-repeat="item in list2 | orderBy:'id':true">
orderBy는 어레이 전체에서 동작합니다(something
위의 샘플 코드)에서 정렬된 배열이 반환됩니다.orderBy는 아무것도 몰라key
그리고.value
.
이것은 실장되어 있지 않습니다.여기를 참조해 주세요.
https://github.com/angular/angular.js/issues/1286
편집(2013년 8월 27일): 이 문제는 해결된 것 같습니다.
선택 목록에 대해 이를 가능하게 하기 위해 커스텀필터를 만들었습니다.
.filter('toDictionaryArray', function () {
return function (obj) {
if (!(obj instanceof Object)) return obj;
var arr = [];
for (var key in obj) {
arr.push({ key: key, value: obj[key] });
}
return arr;
}
})
select list ng-select 후 다음과 같이 읽습니다.
<select ng-options="kv.key as kv.value for kv in p.options | toDictionaryArray | orderBy:'value'"></select>
akonsu님 말씀대로, 이 기능은 이쪽에서 요청했습니다.그러나 최신 (1.3.0)베타에서는 아직 동작하지 않았습니다.
코멘트에는 적절한 회피책이 포함되어 있습니다(밑줄은 필수이며, 'key'에 대한 참조는 'value'로 대체해야 합니다).위의 예에서 $key'는 다음과 같습니다.
[필터 추가]:
app.filter('toArray', function() { return function(obj) { if (!(obj instanceof Object)) return obj; return _.map(obj, function(val, key) { return Object.defineProperty(val, '$key', {__proto__: null, value: key}); }); }});
마크업 예시:
<div ng-repeat="val in object | toArray | orderBy:'priority' | filter:fieldSearch"> {{val.$key}} : {{val}} </div>
잠재적인 단점:
- object.defineProperty는 IE8에서는 이와 같이 동작하지 않습니다($key를 열거할 수 있도록 하는 것을 꺼려하지 않는다면 이것은 간단한 변경입니다).
- 속성 값이 객체가 아닌 경우 $key 속성을 설정할 수 없으며 이는 실패합니다.
- orderBy 또는 ngRepeat에 직접 통합되지 않으므로 구문이 다릅니다.
다음은 좋은 방법(Angular-to-ArrayFilter)입니다.
.filter('toArray', function () {
return function (obj, addKey) {
if ( addKey === false ) {
return Object.keys(obj).map(function(key) {
return obj[key];
});
} else {
return Object.keys(obj).map(function (key) {
if(typeof obj[key] == 'object') return Object.defineProperty(obj[key], '$key', { enumerable: false, value: key});
});
}
};
});
배열만 지원하고 개체는 지원하지 않는 오더바이 필터를 사용하는 대신Justin Klemm http://justinklemm.com/angularjs-filter-ordering-objects-ngrepeat/에서 코드를 가져와 여러 주문 필드를 지정하는 지원을 추가했습니다.다음 필터 예는 값의 속성을 기준으로 필터링하는 것이지만 키를 기준으로 필터링하도록 쉽게 변경할 수도 있습니다.
app.filter('orderObjectBy', function()
{
return function(items, fields, reverse)
{
var filtered = [];
angular.forEach(items, function(item)
{
filtered.push(item);
});
filtered.sort(function (a, b)
{
var result = 0;
for (var i = 0; i < fields.length; ++i)
{
if (a[fields[i]] > b[fields[i]])
{
result = 1;
break;
}
else if (a[fields[i]] < b[fields[i]])
{
result = -1;
break;
}
}
return result;
});
if (reverse)
{
filtered.reverse();
}
return filtered;
};
});
그런 다음 html5 웹 페이지 내에서 다음과 같이 사용합니다. 여기서 통계는 키 값 쌍이 포함된 맵/사전입니다.
<div class="row" ng-repeat="stat in statistics | orderObjectBy: 'NumTimesPartnered', 'NumTimesOpponent']:true">
<div class="col col-33">{{stat.Name}}</div>
<div class="col"><center>{{stat.NumTimesPartnered}}</center></div>
<div class="col"><center>{{stat.NumTimesOpponent}}</center></div>
</div>
언급URL : https://stackoverflow.com/questions/14330878/orderby-not-working-with-dict-syntax-on-ng-repeat
'programing' 카테고리의 다른 글
Angularjs가 ng-view 내에서 스크립트를 로드하지 않음 (0) | 2023.02.23 |
---|---|
Visual Studio Code 자동 Import는 TypeScript의 Lerna 서브패키지로 절대 경로만 제공합니다. (0) | 2023.02.23 |
생성자에서 상태를 정의하는 것이 좋습니까, 아니면 속성 이니셜라이저를 사용하는 것이 좋습니까? (0) | 2023.02.23 |
@RequestMapping 주석의 경로 속성과 값 속성의 차이 (0) | 2023.02.23 |
JSON 옥텟이란 무엇이며, 2개가 필요한 이유는 무엇입니까? (0) | 2023.02.23 |