1

アイテムのリストを英数字順にソートする作業を行っています。orderBy で ng-repeat を使用すると、処理しているデータの種類に応じて、数値またはアルファベット順にソートされる傾向があることがわかりました。ただし、英数字順にはソートされません。

JavaScript コード:

    function AppCtrl($scope) {
        $scope.items = [
             {'name':'School Item 1','address':'1920'},
             {'name':'Work Item 2','address':'4192'},
             {'name':'Ad Item 5','address':'2039'},
             {'name':'Cool Item 45','address':'2090'},
             {'name':'Cool Item 50','address':'1029'},
             {'name':'Cool Item 100','address':'1829'},
             {'name':'Cool Item 400','address':'1728'}
        ];
    }

HTML コード:

    <ul ng-controller="AppCtrl">
        <li ng-repeat="item in items|orderBy:['name','address']">
             {{item.name}} {{item.address}}
        </li>
    </ul>

ここにフィドルがありますhttp://jsfiddle.net/roverton/PuYLS/1/

注文すると、1 の次に 100、45 の次に 400、5 の次に 50 などと表示されることに注意してください。これらを英数字で注文したいと思います。AngularJSでそれを行うにはどうすればよいですか?

4

1 に答える 1

1

これを行う 1 つの方法は、関数を使用して数値を抽出することです。

function nameNumberSorter(item) {
    var numberPart = item.name.replace('NamedItem', '');
    return parseInt(numberPart);
}

次に、フィルターを少し変更します。

<div ng-app>
    <ul ng-controller="AppCtrl">
        <li ng-repeat="item in items|filter:deviceBindingFilter|orderBy:nameNumberSorter">
            {{item.name}} - {{item.address}}
        </li>
    </ul>
</div>

または、ソート用にモデルに追加のフィールドを作成することもできます。

function AppCtrl($scope) {
    $scope.items = [
         {'name':'NamedItem1','address':'1920', 'sortOrder': 1 },
         {'name':'NamedItem2','address':'4192', 'sortOrder': 2 },
         {'name':'NamedItem5','address':'2039', 'sortOrder': 5 },
         {'name':'NamedItem45','address':'2090', 'sortOrder': 45 },
         {'name':'NamedItem50','address':'1029', 'sortOrder': 50 },
         {'name':'NamedItem100','address':'1829', 'sortOrder': 100 },
         {'name':'NamedItem400','address':'1728', 'sortOrder': 400 }
    ];
}

そして、並べ替えを変更して、このフィールドを確認します。

<div ng-app>
    <ul ng-controller="AppCtrl">
        <li ng-repeat="item in items|filter:deviceBindingFilter|orderBy:'sortOrder'">
            {{item.name}} - {{item.address}}
        </li>
    </ul>
</div>
于 2013-08-29T18:06:11.283 に答える