선택 상자의 AngularJS orderBy가 예상대로 작동하지 않습니다.

Question

이전 PHP/JS 프로젝트를 직선형 AngularJS로 변환하려고합니다.

내가 겪고있는 문제는 내 선택 상자에있는 orderBy:"name"이 작동하고 있다는 것입니다.

예를 들어 건물 드롭 다운을 열면 아래의 그림과 같이 올바른 알파벳 순서로 표시됩니다. 그러나 드롭 다운 전체에 무작위로 배치 된 몇 가지가 있습니다.

또 다른 이상한 점은 JSON 파일이 이미 알파벳 순서로되어 있기 때문에 어떤 거래인지 잘 모르겠습니다.

저는 AngularJS에 처음 왔으므로, 나는 작은 것을 놓치고 있다는 것을 알고 있습니다. 어떤 도움이라도 대단히 감사하겠습니다. 감사!

Plunker : http://plnkr.co/edit/wHSERdfKLaYaaSMBph73

JSON 예 :

{ 
    "id": 110, 
    "name": "Administration Center", 
    "address": null, 
    "latitude": "41.256326", 
    "longitude": "-95.973784", 
    "content": "", 
    "overlay": "g|xzFnywhQ?^^??j@M??^r@??_@K??kA", 
    "url": "", 
    "type_id": 3, 
    "show_marker": 0, 
    "show_label": 1, 
    "custom_marker": "", 
    "created_at": "2013-07-10 15:40:09", 
    "updated_at": "2013-07-10 15:42:50", 
    "color": "#08c" 
} 

Answer 1

귀하의 plunker이 당신의 의존성 (즉, 순서에 따라 약간의 오차가 있었다 : 등 각도 후 JQuery와, dev에 콘솔에 오류 메시지가). 각도 및 jquery를 사용하는 경우 먼저 jquery를 포함해야합니다. 당신은 당신이 orderBy 필터를 사용하는 경우 컨트롤러에 데이터를 주문할 필요가 없습니다 http://plnkr.co/edit/92zvkjP1cx1wBlGqwB4D?p=preview

:

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
<script src="//cdn.jsdelivr.net/underscorejs/1.5.1/underscore-min.js"></script> 

다음은 수정과 데모입니다. 그것은 ng-select처럼 나에게 보이는

HTML

<div ng-repeat="(key,menu) in menus"> 
    <h1>{{typeIds[key]}}</h1> 
    <select ng-model="selectedlocation" 
      ng-options="item.id as item.name for item in menu | orderBy:'name'"> 
    </select> 
</div> 

JS

function menuController($scope, $http) { 
    // probably not the best way to do this 
    $scope.typeIds = {3: "Buildings", 6: "Parking (Fac/Staff)", 7: "Parking (Public)", 8: "Parking (Student)", 11: "Landmarks"}; 

    $http.get('locations.json').then(function(res) { 
     $scope.locations = res.data; 
     $scope.menus = _($scope.locations).groupBy('type_id'); 

     /* 
     // This is not needed anymore 
     //Convert to array so it sorts correctly on the view side. 
     $scope.orderedMenus = []; 
     _($scope.menus).each(function(data, key) { 
      $scope.orderedMenus.push({"key" : key, "data" : data}) 
     }); 
     */ 
    }); 
} 

Answer 2

http://plnkr.co/edit/yRR34nwCBIh6cAiTXIBP?p=preview

은 값 (편집하지만 아무것도 주문 좋아하지 않는다 : 그것은 정확하지 않은 것처럼 보입니다). 그래서 컨트롤러에서 밑줄을 긋고 약간의 정렬을하고 더 명확한 선택을했습니다 :

<div ng-repeat="menu in orderedMenus | orderBy:'name'"><!-- orderBy might not be necessary here --> 
    <h1>{{typeIds[menu.key]}}</h1> 
    <select ng-model="selectedlocation"> 
    <option ng-repeat="item in menu" value="item.id"> 
    {{item.name}} 
    </option> 
    </select>  
</div> 

트릭을 수행하는 것은 어느 것입니까? Screenshot here.

Answer 3

더 나은 솔루션이 여기에 게시 된 것처럼 보입니다.

<select ng-model="selectedlocation" ng-options="value.id as value.name for (key,value) in menu.data | orderBy:sortFunction"></select> 

을 당신이 컨트롤러에서 다음과 같이 뭔가를 추가하는 경우 :

orderBy 예를 들어, 정렬 기능을 취할 수 그러나, 당신이이 상황에서 옵션을 알겠지만, 당신은 당신이 일종의 소유 쓸 수 있습니다

$scope.sortFunction = function(item){ 
    console.log("Parameter: ", item.name); 
} 

항목 이름이 표시됩니다. 이 경로를 따라 간다면 sortFunction()의 값을 반환하면 <에 대해 계산할 때 =,> 연산자는 원하는 모든 정렬을 생성합니다.

나는이 경로를 추천하지 않습니다. 완전성을 위해 언급하는 것입니다. 당신의 첫 번째 시도에 대한

http://docs.angularjs.org/api/ng.filter:orderBy