1

我正在尝试将旧的 PHP/JS 项目转换为直接的 AngularJS。

我遇到的问题是orderBy:"name"我的选择框上的只是一种工作。

例如，在 plunker（下图）中，如果您打开建筑物下拉菜单，它似乎按正确的字母顺序排列。但是，在整个下拉列表中，有一些只是随机放错了位置。

另一个奇怪的事情是 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"
}
4

3 回答 3

1

Your plunker had some errors in the order of your dependancies (ie: jquery after angular, etc. There is an error message in the dev console). When using angular and jquery, you have to include jquery first.

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

Here is your demo with the fixes: http://plnkr.co/edit/92zvkjP1cx1wBlGqwB4D?p=preview

You do not need to order your data in the controller if you are using the orderBy filter.

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})
        });
        */
    });
}
于 2013-10-15T21:17:56.567 回答
0

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>

哪个有诀窍。截图在这里。

于 2013-10-15T21:21:36.957 回答
0

看起来现在这里发布了一个更好的解决方案。但是，为了让您知道在这些情况下的选择，您可以编写自己的排序，因为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-15T22:19:40.123 回答