假设我的数据库中有对象“foo”,“foo”同时包含“name”和“bar_id”.
有人可以告诉我有关使用数据对象执行此操作的线索吗？
参考文献：
Angular JS Remove Blank option from Select Option
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将成为记录中的识别参数,用于上拉并显示“在更改时”(选择选项后立即).
我已经尝试了所有我能想到的东西来设置它,似乎没有任何工作.最糟糕的是,它要么默默地失败,要么没有任何迹象表明我做错了什么,或抱怨foo不是一个对象,这让我感到沮丧. (我向你保证,“foo”是由我正在处理的实际代码中的AJAX请求加载的,并且在其他地方作为对象正常工作 – 尽管如此,NDAs禁止我共享实际代码,抱歉.)
使用其他线程中的上述示例,我理解我会在模板中的select标签中分配类似ng-model =“typeOptions”的内容,但是如何获取“typeOptions”来访问foo并使foo.name成为选项标签和foo.bar_id选项值？此外,选项的默认角度值(看起来像生成的索引的那些)对我来说很好,但是我仍然需要调用foo.bar_id来完成任务,所以它必须“在某处”.
任何帮助,将不胜感激;目前我坚持选项本身的hackish ng-repeat,我理解这不是最佳实践..而且我在Angular中仍然相当新,但仍然觉得有些混乱,所以你的答案更简单,更直接,我将能够更好地成功使用它们.谢谢！
@H_301_22@好吧,我刚才明白你真正的问题是什么(至少我希望如此;)).幸运的是,这很容易：
按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/
有关更多选项,请查看manual.特别是在：
ngOptions(可选)»用于对象数据源：
上一个答案：
正如我在评论中所写,使用ngOptions：
>您无法强制角度将模型数据用作视图中的实际选项值. Angular以自己的方式处理它.它只能确保您的范围模型在更改时设置为正确的值.如果这不是你想要的,那么你必须编写自己的指令,可能使用ngRepeat.
>你总是需要两个单独的模型.一个用作选项列表(这应该总是一个对象数组),一个用于存储选定的值(这将在设置ngOptions指令的方式上有所不同).
>提示：当角度无法将指定的ngModel与选项列表匹配且没有设置真正的空白选项时,臭名昭着的空白选项始终是结果. (注意：如果ngModel在当前作用域中未定义或者它的值不能与选项列表匹配,那么它将被设置或者它的值将被覆盖,并且首先选择任何选项.这就是为什么空白选项随后消失.)
按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/
@H_301_22@ 原文链接：https://www.f2er.com/angularjs/140784.html