javascript - AngularJS:HTML 选择使用 map 中的值并按键升序排列

Question

我有州 map (双向)。由stateName和stateCode组成。它由以下 HTML 代码填充，但无法按 stateCode 或 stateName 按升序过滤。

<div class="col-sm-2">
              <select ng-model="location.stateCode"  ng-change="loadDistricts();" ng-options="stateName for (stateCode, stateName) in stateOptions | orderBy:'stateCode'" class="form-control" id="state"></select>
</div>

//Json Object
    stateOptions = {'MH':'Maharashtra','GJ':'Gujarat','MP':'Madhya Pradesh'};

Answer 1

您颠倒了 stateCode 和 stateName:

ng-options="stateName for (stateCode, stateName) in stateOptions"

此外，由于 stateOptions 是一个对象，因此键可能会按字母顺序插入，具体取决于 js 虚拟机。 orderBy 过滤器在这里毫无意义，因为(来自 documentation ):

Orders a specified array by the expression predicate. It is ordered alphabetically for strings and numerically for numbers

参见fiddle

<小时/>

编辑:如果您想确实控制顺序，请将您的结构重新设计为数组:

$scope.stateOptions = [{
    stateCode: 'MH',
    stateName:'Maharashtra'
},{
    stateCode: 'GJ',
    stateName:'Gujarat'
},{
    stateCode: 'MP',
    stateName:'Madhya Pradesh'
}];

ng-options="state.stateName for state in stateOptions | orderBy: 'stateCode'"

参见updated fiddle