2016-10-11 3 views
0

은 아래 링크를 참조하시기 바랍니다AngularJS와

http://codepen.io/anon/pen/fjkcg

HTML :

<section ng-app="app" ng-controller="MainCtrl"> 
    <span class="label">Ordered By: {{orderByField}}, Reverse Sort: {{reverseSort}}</span><br><br> 
    <table class="table table-bordered"> 
    <thead> 
     <tr> 
     <th> 
      <a href="#" ng-click="orderByField='firstName'; reverseSort = !reverseSort"> 
      First Name <span ng-show="orderByField == 'firstName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span> 
      </a> 
     </th> 
     <th> 
      <a href="#" ng-click="orderByField='lastName'; reverseSort = !reverseSort"> 
      Last Name <span ng-show="orderByField == 'lastName'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span> 
      </a> 
     </th> 
     <th> 
      <a href="#" ng-click="orderByField='age'; reverseSort = !reverseSort"> 
      Age <span ng-show="orderByField == 'age'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span> 
      </a> 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="emp in data.employees|orderBy:orderByField:reverseSort"> 
     <td>{{emp.firstName}}</td> 
     <td> <input type="text" 
        ng-init="empx['name_'+$index]=emp['lastName']" 
      ng-model="empx['name_'+$index]"/> </td> 
     <td>{{emp.age}}</td> 
     </tr> 
    </tbody> 
    </table> 
</section> 

컨트롤러 :

var app = angular.module('app', []); 

app.controller('MainCtrl', function($scope) { 
    //$scope.orderByField = 'firstName'; 
    $scope.reverseSort = false; 
    $scope.empx={}; 
    $scope.data = { 
    employees: [{ 
     firstName: 'John', 
     lastName: 'F', 
     age: '6703114' 
    },{ 
     firstName: 'Frank', 
     lastName: 'D', 
     age: '665087589' 
    },{ 
     firstName: 'Sue', 
     lastName: 'F', 
     age: '5271761234' 
    }, 
       { 
     firstName: 'Sue', 
     lastName: 'F', 
     age: '52' 
    },{ 
     firstName: 'Sue', 
     lastName: 'F', 
     age: '2334564564564564564' 
    }] 
    }; 
}); 

우리는 텍스트 상자 컨트롤과 날짜 선택기를 ng-repeat 내부의 컨트롤. 내가 제대로 정렬하지 않는성에 필터를 걸 때. 어떻게 컨트롤 안에 컬렉션을 정렬 할 수 있습니다. 나이 및 성 정렬이 작동하지 않습니다. 성은 텍스트 상자 컨트롤 안에 있고 숫자가 많아서 작동하지 않아서 작동하지 않습니다.하지만 문자열로 표시되었습니다. 나는 모든 경우에 올바르게 작동하도록 정렬을 달성 할 수 있습니다.

+0

템플릿에 ng-model="item.lastName"를 사용 empx 반복 -

는 겨-초기화를 제거하고 직접 직원 데이터의 복제 (또는 원본)를 사용하는 것을 시도하십시오! 나는 어떤 문제도 보지 못합니까? 네가 그것을 분류 했니? –

+0

@ Angular_10 성 및 나이 정렬이 작동하지 않습니다 – SivaRajini

답변

1

ng-init 때문일 것입니다. 중첩 된 ng 반복을 제외하고는 ng-init을 사용하지 않아야합니다.

empx = data.employees.map(item => angular.extend({}, item)); 

및 코드 펜이 잘 작동

+0

당신의 해결책에 대해 잘 모르겠습니다.이 문제를 해결할 수 있습니다. – SivaRajini

+0

바이올렛을 제공하십시오. – SivaRajini

+0

http://codepen.io/anon/pen/jrKEBV?editors=1010 –