각도 순서 ng-반복 텍스트로 번호 정렬

각도 순서 ng-반복 텍스트로 번호 정렬

다음과 같은 데이터가 있습니다.

[{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris"},
{"firstname":"Jason","lastname":"Diry","age":"5","id":"5"},
{"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo"}]

ng-repeat에서 id 또는 에이징별로 주문하면 번호가 텍스트로 정렬됩니다.어디에도 문제가 있다고 쓰여져 있지 않기 때문에, 제 코드에 문제가 있는 것 같습니다.이 바이올린을 만들었습니다.http://jsfiddle.net/vsbGH/1/ 템플릿은 죄송하지만 jsfiddle에서는 html 박스를 사용할 수 없습니다.어쨌든 데이터를 로드하고 정렬하는 코드는 다음과 같습니다.

//user data
app.service('People', function() {
var People = {};
People.details = [{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris"},
                  {"firstname":"Jason","lastname":"Diry","age":"5","id":"5"},
                  {"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo"}]
return People;
});

//list ctrl
controllers.listCtrl = function ($scope,People) {
 $scope.people = People.details;

 $scope.sortList = function(sortname) {
    $scope.sorter = sortname;
 }
}

템플릿의 ng-repeat 부분은 다음과 같습니다.

<tr ng-repeat="person in people | orderBy:sorter ">
        <td>{{person.id | number}}</td>
        <td>{{person.firstname}} </td>
        <td>{{person.lastname}} </td>
        <td>{{person.age | number}}</td>
        <td>{{person.cars}} </td>
 </tr>

숫자 데이터가 숫자로 정렬되지 않는 이유와 텍스트로 정렬되는 이유를 이해하는데 도움을 주시면 감사하겠습니다.

가장 적절한 해결책은 JSON 오브젝트의 번호를 올바르게 포맷하는 것입니다(따옴표로 둘러싸지 않는 것).그래서:

 [{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris"},
  {"firstname":"Jason","lastname":"Diry","age":"5","id":"5"},
  {"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo"}]

다음과 같이 됩니다.

[{"id":42,"firstname":"Sarah","lastname":"Dilby","age":40,"cars":"Yaris"},
 {"firstname":"Jason","lastname":"Diry","age":5,"id":5},
 {"id":6,"firstname":"Bilson","lastname":"Berby","age":1,"cars":"Tipo"}]

JSON 데이터의 포맷을 수정할 수 없다면 SergL의 솔루션이 좋다고 생각합니다.

덧붙이자면, 제 특정 케이스의 문제는 서버측의 PHP의 json_encode 함수입니다.디폴트로는 숫자를 문자열로 취급합니다.수정하기 위해서는JSON_NUMERIC_CHECKPHP 스크립트의 인코딩 메서드에 대한 옵션:

json_encode($assoc_array,JSON_NUMERIC_CHECK);

JSON을 변경할 필요가 없습니다.다음과 같이 orderBy 필터에 함수를 전달할 수 있습니다.

$scope.sorterFunc = function(person){
    return parseInt(person.id);
};

<tr ng-repeat="person in people | orderBy:sorterFunc ">
        <td>{{person.id | number}}</td>
        <td>{{person.firstname}} </td>
        <td>{{person.lastname}} </td>
        <td>{{person.age | number}}</td>
        <td>{{person.cars}} </td>
 </tr>

ng-repeat 명령어 내에서 숫자 필터를 사용하고 있습니다.

<td>{{person.id | number}}</td>

필터는 출력 형식을 지정하는 데 사용되지만 모델 속성은 업데이트되지 않습니다.예를 들어 person.id = 1234.56789는 1,234.568로 렌더링됩니다.

위에서 설명한 바와 같이 연령을 Number 유형으로 변환해야 합니다.그러면 orderBy는 정상적으로 동작합니다.예를 들어 서비스 내부:

angular.forEach(People.details, function (detail) {
  detail.age = parseFloat(detail.age);
});

orderBy 값이 다른 문자열을 가리키는 변수가 아니라 정렬할 속성인 경우 따옴표로 묶어야 합니다.

person in people | orderBy:'-id'

int 또는 float를 해석한 후에도 올바르게 정렬되지 않으면 이 문제가 원인일 수 있습니다.</ (그건 내 돈스캡이야)

텍스트 필드와 ngModel을 사용하여 주문한 모델의 값을 변경할 때도 같은 문제에 직면했습니다.값이 문자열로 간주되었기 때문입니다.

새로운 HTML5에서 Angular는 입력 필드의 값을 수치(float)로 해석하여 올바른 순서를 얻을 수 있었습니다.

let let 렛츠고orderBy스코프 또는 스코프가 소유한 메서드 또는 분리되지 않은 상위 메서드를 가리키고 이 메서드가 문자열에서 캐스트된 번호를 반환하도록 합니다. ''을 계승해서 지시가 요.personngRepeat " " ng ng ng ng ng ng ng ng ng"을 사용하다

또한 age는 정수일 수 있는 문자열이므로 숫자 정렬이 기본적으로 적용됩니다.

데이터 서버 내부를 변경할 수 없는 경우 가져오는 동안 클라이언트 내부를 변경합니다.

정렬 함수를 호출할 때마다 반복 컬렉션을 업데이트하는 것이 가장 좋습니다.저는 Lodash - orderBy를 사용하고 있으며, 소터 기능에 따라 컬렉션을 주문하고 있습니다.테이블 열 머리글을 클릭하면 정렬이 호출된다고 가정합니다.

예:

컬렉션 개체:

ctrl.people = [{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris","salary": 700}, {"firstname":"Jason","lastname":"Diry","age":"5","id":"5","cars":"Lexia","salary": 500},{"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo","salary": 400}];

사용자가 열 머리글을 클릭하여 연령별로 정렬:

<th class="col-age" data-ng-click="ctrl.sortColumn('age')">Age</th>

호출된 메서드:

ctrl.sortColumn('age'); // where age is column containing numbers only

방법 구현:

ctrl.sortedCol = 'firstname';    //Default sort column

ctrl.sortColumn = (column) => {
    ctrl.sortedCol = column; //age
    let order = 'asc'; //you can decide the order based on your own logic
    ctrl.people = _.orderBy(ctrl.people, [ctrl.sorter], [order]);   //update the collection
};

ctrl.sortColumn(ctrl.sortedCol); //called on initial rendering

정렬기 기능:열 유형을 기준으로 정렬된 컬렉션을 반환합니다.

ctrl.sorter = (item) => {
    const columnType = ctrl.getColumnType();
    if(item[ctrl.sortedCol] && columnType === 'string'){
        return item[ctrl.sortedCol].toLowerCase();
    } else if(item[ctrl.sortedCol] && columnType === 'number'){
        return parseInt(item[ctrl.sortedCol]);
    } else{
        return item[ctrl.sortedCol];
    }    
};

열 유형 결정: 문자열, 숫자 또는 짝수 날짜일 수 있습니다.

ctrl.getColumnType = () => {
    if(ctrl.sortedCol === 'firstname' || ctrl.sortedCol === 'lastname' || ctrl.sortedCol === 'cars'){
        return 'string';
    } else if(ctrl.sortedCol === 'salary' || ctrl.sortedCol === 'age'){
        return 'number';
    }
};

언급URL : https://stackoverflow.com/questions/16764177/angular-orderby-number-sorting-as-text-in-ng-repeat