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在选择框上不能按预期工作。

回答

相关问题