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

发布时间：2020-12-17 09:15:37 所属栏目：安全来源：网络整理

导读：我一直在搜索高低,以解释如何删除AngularJS总是在选择中呈现的空选项.当从直接放在代码中的 JSON数组派生选项时,我发现了很多信息,但在使用数据对象时,我找不到任何有关删除此空选项的信息. 假设我的数据库中有对象“foo”,“foo”同时包含“name”和“bar_i

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

假设我的数据库中有对象“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中仍然相当新,但仍然觉得有些混乱,所以你的答案更简单,更直接,我将能够更好地成功使用它们.谢谢！

更新

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!