programing

Orderby는 ng-repeat의 dict 구문을 사용하지 않습니다.

shortcode 2023. 2. 23. 23:22
반응형

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

반응형