1

一部のチームをチーム名で並べ替えるための選択ドロップダウンを取得しようとしています。部分的に機能しているように見えますが、チームを順番に表示することはできません。「すべてのチーム」を一番上にしたいのですが、それがどれほど実現可能かわかりません。

コードは次のとおりです。

HTML

<div ng-app>
<div ng-controller="Ctrl">
    <label>Filter by Team:</label>
    <select ng-model="filters.teamIdSelected" ng-options="value.teamId as value.teamName for (key, value) in teams | orderBy: 'teamName'"></select>
</div>

JS

function Ctrl($scope) {
$scope.filters = {};
var teams = [{
    "teamName": "Cubs",
    "teamId": 51
}, {
    "teamName": "Bulldogs",
    "teamId": 68
}, {
    "teamName": "Grizzlies",
    "teamId": 12
}, {
    "teamName": "Tigers",
    "teamId": 71
}, {
    "teamName": "Braves",
    "teamId": 16
}, {
    "teamName": "Cowboys",
    "teamId": 24
}, {
    "teamName": "Monsters",
    "teamId": 70
}, {
    "teamName": "Brats",
    "teamId": 23
}, {
    "teamName": "Chumps",
    "teamId": 21
}, {
    "teamName": "Dingleberries",
    "teamId": 93
}, {
    "teamName": "Redskins",
    "teamId": 22
}, {
    "teamName": "123Myteam",
    "teamId": 47
}, {
    "teamName": "Gophers",
    "teamId": 87
}, {
    "teamName": "Peanuts",
    "teamId": 77
}, {
    "teamName": "Bloopers",
    "teamId": 79
}, {
    "teamName": "Losers",
    "teamId": 88
}, {
    "teamName": "Marlins",
    "teamId": 84
}, {
    "teamName": "Ear Muffs",
    "teamId": 75
}, {
    "teamName": "Pizzas",
    "teamId": 78
}, {
    "teamName": "Weiners",
    "teamId": 74
}, {
    "teamName": "Bills",
    "teamId": 86
}];
teams.unshift({
    teamId: 0,
    teamName: 'All Teams'
});
$scope.teams = teams;

$scope.filters.teamIdSelected = 0; }

ここにデモンストレーションするフィドルがあります。

前もって感謝します。

4

3 に答える 3

2

残念ながら、Javascript で文字列を比較/ソートする場合 (orderBy の動作)、数字で始まるすべての文字列は他の文字列よりも前になります。そのため、select の生成方法を少し変更して、次のようにすることをお勧めします。

<div ng-controller="Ctrl">
  <label>Filter by Team:</label>
  <select ng-model="filters.teamIdSelected">
    <option value="0">All Teams</option>
    <option ng-repeat="team in teams | orderBy: 'teamName'" value="{{team.teamId}}">{{team.teamName}}</option>
  </select>
</div>

ここで動作するフィドルを参照してください

于 2013-10-08T17:48:26.230 に答える
2

これはあなたが必要とするものです：

<div ng-app>
  <div ng-controller="Ctrl">
        <label>Filter by Team:</label>
        <select
        ng-model="filters.teamIdSelected"
        ng-options="team.teamName for team in teams | orderBy: 'teamName'"
      ><option value="">All Teams</option></select>
    </div>
  </div>

デモ: http://jsfiddle.net/W7UwF/3/

于 2013-10-08T17:53:51.437 に答える