Angularjs選擇不正確排序

我試圖通過選擇下拉菜單來按照團隊名稱排列一些團隊。它似乎部分工作，但似乎無法讓團隊按順序顯示。真的喜歡在頂部有「所有團隊」，但我不知道這是多麼可行。Angularjs選擇不正確排序

下面是代碼：

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>

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

這裏是一個fiddle證明。

在此先感謝。

來源

2013-10-08 Scotty Bollinger

您的for (key, value) in teams正在取消一個的排序，我認爲它是爲了迭代object prop erties，你只需要一個數組。你可以用for value in teams替換爲：

ng-options="value.teamId as value.teamName for value in teams | orderBy: 'teamName'

尼古拉的選擇是不錯的，但這裏有一對夫婦的更多方式。首先，你可以把一個空間，「所有的球隊」，這將導致它首先（fiddle）排序前：

teams.unshift({ 
    teamId: 0, 
    teamName: ' All Teams' 
});

其次，你可以創建一個功能自定義排序。這一次只是增加了其他的名字前面的「Z」排序的目的（fiddle）：

$scope.sortName = function(team) { 
    if (team.teamName == 'All Teams') 
    return team.teamName; 
    return 'Z' + team.teamName; 
};

-html-

<select ng-model="filters.teamIdSelected" 
    ng-options="value.teamId as value.teamName for value in teams | orderBy:sortName" 
> 
</select>

來源

2013-10-08 18:01:11

感謝您的迴應。在這兩個小提琴中，這些項目仍未正確分揀。跟尼古拉斯的回答 –

對不起，錯過了。我更新了小提琴並編輯了我的答案，所以這個問題在頂部得到解決。 –

不幸的是，當比較/排序Javascript中的字符串（按什麼順序執行）時，每個以數字字符開頭的字符串都將位於任何其他字符串之前。這就是爲什麼我會建議你改變一點點你的選擇的產生方式和這樣做：

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

見工作小提琴here

來源

2013-10-08 17:48:26

我不喜歡使用NG-重複的下拉框。 – geniuscarrier

這明白了。謝謝！！ –

這是你所需要的：

<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-08 17:53:51 geniuscarrier

感謝您的回覆。雖然這在技術上解決了這個問題，但它也創造了以前解決的另一個問題。添加代碼時，select中的值將更改爲索引，而不是我需要傳遞給服務器的teamId。例如，「小熊隊」應該是51，但是9將會通過。 –

@ScottyBollinger在這種情況下，ng-change將幫助您解決問題。看看這個：http://jsfiddle.net/W7UwF/4/ – geniuscarrier

Angularjs選擇不正確排序

回答

相關問題