AngularJS orderBy在選擇框上不能按預期工作。

我想將舊的PHP/JS項目轉換爲直AngularJS。AngularJS orderBy在選擇框上不能按預期工作。

我遇到的問題是我的選擇框上的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?^^[email protected]??^[email protected][email protected]??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" 
}

來源

2013-10-15 fngyo

好帖子爲您的第一次嘗試。我相信這會很快回復。 – jcollum

你plunker在你的依賴關係（即訂購了一些錯誤：jQuery的后角，等有一個在開發者控制檯中的錯誤信息）。當使用angular和jquery時，你必須首先包含jquery。

<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>

這是您的演示與修復：http://plnkr.co/edit/92zvkjP1cx1wBlGqwB4D?p=preview

你並不需要，如果你使用的是orderBy過濾器控制器數據進行排序。

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>

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}) 
     }); 
     */ 
    }); 
}

來源

2013-10-15 21:17:56 jpmorin

「你必須首先包含jquery」 - angular有一個嵌入jquery的小版本，爲什麼要有jquery呢？ – jcollum

我不知道他在自己的項目中如何使用jquery，但他試圖包含它，所以我就這麼說。每當你這樣做，jquery必須在角度前出現，所以角度可以使用它。 jquery具有整潔的功能，可用於大型項目中。 – jpmorin

嘿jpmorin。這太棒了。非常感謝你的幫助。我要去瘋了。 jquery在那裏的唯一原因是引導依賴，儘管我甚至沒有真正使用它。 – fngyo

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

它看起來對我來說，只是ng-select不喜歡訂購任何東西，但值（編輯：看起來這不完全正確）。所以我在控制器中用下劃線進行了一些排序，並做出了更明確的選擇：

<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。

來源

2013-10-15 21:21:36 jcollum

這也看起來像它的伎倆。謝謝！ – fngyo

坦率地說jpmorin在這裏有更好的答案 - 他確實解決了這個問題，我解決了它。 – jcollum

看起來現在有更好的解決方案發布在這裏。但是，只要你知道在這些情況下你的選擇，你可以寫你自己的排序爲orderBy可以採取排序的功能，例如：如果你添加了一些像在你的控制器以下

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

：

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

你會看到你得到的項目名稱。如果你走這條路線，你的工作是從sortFunction()返回一個值，當對<進行評估時，=，>操作符可以產生你想要的任何類型。

我不推薦這條路線 - 只是爲了完整起見而提及它。

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

來源

2013-10-15 22:19:40 KayakDave

很高興知道。謝謝@KayakDave – fngyo

AngularJS orderBy在選擇框上不能按預期工作。

回答

相關問題