angularjs – 如何使角度ng模型与选定元素中的对象一起工作？

发布时间：2020-12-17 07:44:42 所属栏目：安全来源：网络整理

导读：当从选项元素传递对象时,在select元素上,我有一个ng-model的问题.所以,我们想象一下从列表(表的定义)的表中可以创建一列数组,我们想在这个定义上创建一些过滤器 var columns = [ {name: 'Account ID',type: 'numeric'},{name: 'Full name',type: 'text'},{na

当从选项元素传递对象时,在select元素上,我有一个ng-model的问题.所以,我们想象一下从列表(表的定义)的表中可以创建一列数组,我们想在这个定义上创建一些过滤器

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>

如您所见,我希望该过滤器能够获取列的值,并在其中添加特定数据,因此在某一时刻,我的过滤器可能如下所示：

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

无论如何,我不知道这是这样做的方式,但是我想知道如何实现这个行为,而不是写入控制器中的多个js代码.

我做了一些解决方法来完成这一工作,使用ng-change,传递过滤器和column.name,找到列数组中的列,获取类型属性,更新过滤器,但我真的认为有一个更简单的答案这个.

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

<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

更新答案：

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

（编辑：李大同）

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