如何使 angularJS ng-model 与选择元素中的对象一起使用? [英] How to make angularJS ng-model work with objects in select elements?

问题描述

当从 option 元素传递对象时，select 元素上的 ng-model 有问题.因此，假设我们有一个名为 columns(表的定义)的表中的列数组，我们想根据此定义创建一些过滤器

var 列 = [{名称:'帐户ID'，类型:'数字'}，{名称:'全名'，类型:'文本'}，{名称:'出生日期'，类型:'日期'}，{名称:'活动'，类型:'布尔'}//等等];var 过滤器 = [{}];

HTML:

<选择 ng-model="过滤器"><option value="" disabled>选择过滤器</option><option ng-repeat="列中的列" ng-value="column">{{column.name}}</option></选择><input type="text" ng-model="filter.value">

如您所见，我希望 filter 获取 column 的值并在其中添加特定数据，因此在某个时刻，我的过滤器可能是这样的:

<预><代码>[{名称:'账户 ID'，类型:'数字'，值:123}，{名称:'活动'，类型:'布尔'，值:'是'}]

无论如何，我不确定这是这样做的方式，但我想知道如何实现这种行为，而无需在控制器中编写大量 js 代码.

我做了一些变通方法来使用 ng-change 完成此操作，传递 filter 和 column.name，在columns 数组，获取 type 属性，更新 filter，但我真的认为有一个更简单的答案.

解决方案

您可以使用 ng-options 将所选对象绑定到模型:

<select ng-options="column.name for column in columns" ng-model="filter.value"><option value="" disabled>选择过滤器</option></选择><input type="text" ng-model="filter.value.name">

Plunker

更新答案:

<select ng-options="column.name for column in columns" ng-model="filters[$index]"><option value="" disabled>选择过滤器</option></选择><input type="text" ng-model="filters[$index].name">

I have a problem with ng-model on a select element when passing an object from option elements. So, imagine we have an array of columns from a table called columns (the table's definition) and we'd like to creat some filters upon this definition

var columns = [
  {name: 'Account ID',    type: 'numeric'},
  {name: 'Full name',     type: 'text'},
  {name: 'Date of birth', type: 'date'},
  {name: 'Active',        type: 'boolean'}
  // and so on
];

var filters = [{}];

HTML:

<div class="form-field" ng-repeat="filter in filters">
  <select ng-model="filter">
    <option value="" disabled>Choose filter</option>
    <option ng-repeat="column in columns" ng-value="column">{{column.name}}</option>
  </select>
  <input type="text" ng-model="filter.value">
</div>

As you can see, I'd like that filter to get the value of column and to add specific data in it, so at a certain moment, my filter could be like:

[
  {name: 'Account ID', type: 'numeric', value: 123},
  {name: 'Active', type: 'boolean', value: 'Yes'}
]

Anyway, I'm not sure this is the way of doing this, but I'd like to know how can I achieve this behavior, withour writing to much js code in the controller.

I did some workaround to get this done using ng-change, passing the filter and the column.name, find the column in the columns array, get the type property, update the filter, but I really think that there is a simpler answer to this.

解决方案

You can use ng-options to bind the selected object to a model:

<div class="form-field" ng-repeat="filter in filters">
   <select ng-options="column.name for column in columns" ng-model="filter.value">
         <option value="" disabled>Choose filter</option>
   </select>

   <input type="text" ng-model="filter.value.name">
</div>

Plunker

Updated answer:

<div class="form-field" ng-repeat="filter in filters">
   <select ng-options="column.name for column in columns" ng-model="filters[$index]">
     <option value="" disabled>Choose filter</option>
   </select>

   <input type="text" ng-model="filters[$index].name">
</div>

这篇关于如何使 angularJS ng-model 与选择元素中的对象一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！