Question

考虑我有一个像 -

这样的对象列表

var configs = [{
    id: "1",
    name: "config1"
},
 {
    id: "2",
    name: "config2"
 }
];

我使用以下内容搜索配置列表，并将所选配置绑定到另一个名为changed_config的变量。

<table style="width:900px;">
<tr>
   <th style="width:500px; margin:50px">Config Name</th>
   <th style="width:150px;">Config Value</th>
</tr>
<tr ng-repeat="changed_config in changed_configs">
   <td>
      <input type="text" class="form-control" ng-model="changed_config.id" list="names">
      <datalist id="names">
         <option ng-repeat="option in configs | filter:search | limitTo:30" ng-value="option.name"> {{option.name}}
         </option>
      </datalist>
   <td>
      <input type="text" class="form-control" ng-model="changed_config.value">
   </td> 
  </tr>
</table>
<div class="row">
  <button type="button" id="add-reward-grp-btn" ng-click="addConfig()"
       class="btn btn-primary">Add Config                 
  </button>
</div>

控制器代码（不是完整的代码，只是相关的代码段）：

var app = angular.module("drs_scheduler_app", []);
app.controller("CreateSchedulerJob", function ($scope, $http) {
          $scope.changed_configs = []; 
          $scope.configs = [{
                   id: "1",
                   name: "config1"
                   },
                   {
                   id: "2",
                   name: "config2"
                   }
          ];

        $scope.addConfig = function () {
          var config = {
              "id": "",
              "value": ""
          };
          $scope.changed_configs.push(config);
          console.log(config);
          console.log(JSON.stringify($scope.changed_configs));
        }
}

目前，代码显示并将所选配置的name绑定到changed_config变量。但我需要将id绑定到changed_config变量，并将name显示在html中。

如果我将<option>更改为使用ID，则会显示id。

如何将一个属性绑定到变量，但在html中显示另一个？

Answer 1

这是您需要的解决方案，

<强>步骤：

来自option的{{1}}为selected我正在检查   变化

通过添加datalist的{{1}} 观察更改

在input i上，e 选择选项时我指定了该选项   id为相应datalist
的ID键
这是第二个文本框中显示的内容

适用于input change

changed_config

dynamic

请运行以上代码段

Here is a working DEMO

绑定不同于html组件

1 个答案: