AngularJS select:删除空选项并使用数据对象而不是数组

Question

我一直在搜索高低,以解释如何删除AngularJS总是在选择中呈现的空选项.当从直接放在代码中的JSON数组派生选项时,我发现了很多信息,但在使用数据对象时,我找不到任何有关删除此空选项的信息.

假设我的数据库中有对象"foo","foo"同时包含"name"和"bar_id".

有人可以告诉我有关使用数据对象执行此操作的线索吗？

参考: Angular JS从选择选项中删除空白选项

http://jsfiddle.net/MTfRD/3/(这是上面链接的SO问题的其他人的小提琴;代码不是我的,而是取自那个小提琴.)

JS:

function MyCtrl($scope) {
    $scope.typeOptions = [

        { name: 'Feature', value: 'feature' }, 
        { name: 'Bug', value: 'bug' }, 
        { name: 'Enhancement', value: 'enhancement' }
    ];

    $scope.form = {type : $scope.typeOptions[0].value};
}

我想得到foo.name和foo.bar_id.我希望foo.name是选项标签,foo.bar_id是值(例如<option value="foo.bar_id">foo.name</option>,对于每个foo,foo.bar_id将成为记录中的一个识别参数,用于拉出并显示"on change"(选择后立即)选项).

我已经尝试了所有我能想到的东西来设置它,似乎没有任何工作.最糟糕的是,它要么默默地失败,要么没有任何迹象表明我做错了什么,或抱怨foo不是一个对象,这让我感到沮丧.(我向你保证,"foo"是由我正在处理的实际代码中的AJAX请求加载的,并且在其他地方作为对象正常工作 - 尽管如此,NDAs禁止我共享实际代码,抱歉.)

使用其他线程中的上述示例,我理解我会ng-model="typeOptions"在模板中的select标签中分配一些内容,但是如何获取"typeOptions"来访问foo并使foo.name成为选项标签而foo.bar_id是选项值？此外,选项的默认角度值(看起来像生成的索引的那些)对我来说很好,但是我仍然需要调用foo.bar_id来完成任务,所以它必须"在某处".

任何帮助,将不胜感激; 目前我坚持选项本身的hackish ng-repeat,我理解这不是最佳实践..而且我在Angular中仍然相当新,但仍然觉得有些混乱,所以你的答案更简单,更直接,我将能够更好地成功使用它们.谢谢!

Answer 1

更新

好吧,我刚才明白你真正的问题是什么(至少我希望如此;)).幸运的是,这很容易:

Ctrl:

$scope.options = {
  a: 1,
  b: 2,
  c: 3      
};

$scope.selected = 1;

查看:

<select
  data-ng-model="selected"
  data-ng-options="v as k for (k, v) in options"
></select>

演示:http://jsbin.com/hufehidotuca/1/

有关更多选项,请查看手册.特别是在:

ngOptions(可选)»用于对象数据源:

上一个答案:

正如我在评论中所写,ngOptions:

1. 你不能强迫角度使用你的模型数据作为视图中的实际选项值.Angular以自己的方式处理它.它只能确保您的范围模型在更改时设置为正确的值.如果这不是你想要的,那么你必须编写自己的指令,可能使用ngRepeat.

2. 你总是需要两个单独的模型.一个用作选项列表(这应该总是一个对象数组)和一个用于存储所选值(这将在设置ngOptions指令的方式上有所不同).

3. 提示:臭名昭着的空白选项始终是角度无法与分配ngModel给选项列表匹配的结果,并且没有设置真正的空白选项.(注意:如果ngModel它只是undefined在当前范围内,或者它的值不能与选项列表匹配,那么它将被设置或者它的值将被覆盖,并且首先选择任何选项.这就是为什么空白选项随后消失.)

Ctrl:

// the "list of options"
$scope.options = [
  { name: 'A', id: 1 },
  { name: 'B', id: 2 },
  { name: 'C', id: 3 },
  { name: 'D', id: 4 }
];

// a pre-selection by value
$scope.asValue  = 2;

// a pre-selection by object-identity
$scope.asObject = $scope.options[3];

查看:

<!-- select as value -->
<select
  data-ng-model="asValue"
  data-ng-options="foo.id as foo.name for foo in options"
></select>

<!-- select as object -->
<select
  data-ng-model="asObject"
  data-ng-options="foo as foo.name for foo in options"
></select>

<!-- the notorious blank option -->
<select
  data-ng-model="asBogus"
  data-ng-options="foo as foo.name for foo in options"
></select>

<!-- blank option correctly set up -->
<select
  data-ng-model="asBogus"
  data-ng-options="foo as foo.name for foo in options"
>
  <option value="">Please select</option>
</select>

演示:

http://jsbin.com/yasodacomadu/1/