1

古い PHP/JS プロジェクトをストレート AngularJS に変換しようとしています。

私が直面している問題はorderBy:"name"、選択ボックスが機能しているだけだということです。

たとえば、プランカー (下) では、建物のドロップダウンを開くと、正しいアルファベット順に表示されます。ただし、ドロップダウン全体でランダムに配置されているものもいくつかあります.

もう 1 つの奇妙な点は、JSON ファイルが既にアルファベット順に並べられていることです。

私はAngularJSを初めて使用するので、小さなものが欠けていることを知っています。どんな助けでも大歓迎です。ありがとう！

プランカー: 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

plunker には、依存関係の順序でいくつかのエラーがありました (つまり、angular の後の 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>

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

ここに投稿されたより良い解決策があるようです。ただし、これらの状況でのオプションを知るために、次のように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 に答える