programing

ng-timeout 디렉티브는 (키, 값)을 사용할 때 데이터를 정렬합니다.

lastmoon 2023. 3. 23. 23:02
반응형

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의 제한입니다.

ECMAScript 제3판부터:

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>

이것은 Angular 1.4로 고정되어 있습니다.

자세한 내용은 이쪽:

이전에는 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

반응형