AngularJS - ng选项按标签数字排序

时间:2013-10-07 21:03:41

标签: angularjs

我让用户上传表格数据,然后我允许他们在插入之前解析它。

例如,一位用户可以上传:

ID, NAME, PASSWORD, ADDRESS, EMAIL
10, Tim, foo, 123 S Main, tim@mailinator.com
11, Withers, foo, 123 S Main, tim@mailinator.com
//ETC//

另一位用户可能会以不同方式格式化他们的数据:

FIRST_NAME, LAST_NAME, ID, PASSWORD, EMAIL
Tim, Withers, 10, 123, tim@mailinator.com
//You get the idea...

我的应用程序获取数据并允许用户在最终上传到服务器之前指定哪些列具有必要的信息:

Column 0 => ID
Column 4 => Email
Column 2 => Password

我想使用select来限制用户输入:

Which column is the First Name? 
<select 
    ng-options="k as k for (k,v) in uploadData.row[0]" 
    ng-model="columnData.firstName">
</select>

这很有效,但如果它们有超过9列,则选择框如下所示:

0
1
10
11
12
13
2
3
4
5
6
7
8
9

如何确保连续显示1-13?是否有另一种方法可以创建具有特定长度选项的选择?

编辑:解决问题:http://jsfiddle.net/aBccw/204/

4 个答案:

答案 0 :(得分:5)

The angular docs解释了您正在使用的理解表达式(label for (key , value) in object)适用于对象数据源。这就是为什么它将索引作为字符串而不是整数来处理。

您应该尝试使用索引:

<select ng-model="selected" ng-options="friends.indexOf(v) for v in friends">

Here is your updated fiddle.

答案 1 :(得分:2)

option标记上使用ng-repeat来生成选择框的选项是完全可以的。 使用ngRepeat至少有两种方法可以满足您的要求。

使用(key, value) in expression

<select ng-model="selected">
  <option ng-repeat="(key, friend) in friends" value="{{key}}">{{key}}</option>
</select>

使用ngRepeat迭代器的<{1}}属性

$index

由于<select ng-model="selected"> <option ng-repeat="friend in friends" value="{{$index}}">{{$index}}</option> </select> 迭代器从零开始,这两个示例将生成0-12范围内的选项。要使其显示选项1-13,您只需在每次迭代时添加ngRepeat

+1

<option ng-repeat="(key, friend) in friends" value="{{key+1}}">{{key+1}}</option>

答案 2 :(得分:2)

您需要一个过滤器来对它们进行排序。我更新了您的fiddle

ng-options现在是:

<select ng-model="selected" ng-options="id for id in friends|sortKeyIds"></select> 

我添加了过滤器(我必须将控制器放在模块中以添加过滤器)。我确信有更好的方法来进行密钥提取和过滤(如果我没有被困在小提琴中,我会使用underscore.js。)

app.filter('sortKeyIds', function() {
    return function(input) {
        var keys = angular.forEach(input, function(value, key) {
            return parseInt(key);
        });
        keys.sort(function(a, b) {
            return a - b;
        });
        return keys;
    }
});

答案 3 :(得分:0)

你可以使用现有的过滤器本身按照下面给出的整数进行排序,使用parseInt。

ng-options="o as o.id  for o in products | orderBy:'parseInt(id)' track by o.id"