绑定与 html 组件中显示的属性不同的属性答案

【问题标题】：Bind different property than what is shown in the html component绑定与 html 组件中显示的属性不同的属性
【发布时间】：2018-05-17 06:27:36
【问题描述】：

假设我有一个对象列表，例如 -

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>

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

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 中显示另一个？

【问题讨论】：

将ng-value="option.name"更改为ng-value="option.id"
我想我在这里遗漏了一些东西。为什么不能使用 ng-value="option.id" ？
但这将在输入字段中显示id。我需要在字段中显示name，但将id 绑定到变量
然后你需要设置 ng-value="option" 并用它做任何事情
你说的是哪个输入框？

标签： javascript angularjs angular angular-ngmodel angularjs-ng-model

【解决方案1】：

这是您需要的解决方案，

程序：

当 option 是来自 datalist 的 selected 时，我正在检查改变

变化是通过添加datalist的input观察到的

在第987654327 @ i，e 选择选项 i m分配时 id 到各个changed_config 的 id 键

这又显示在第二个文本框中

它适用于dynamic

// Code goes here

function cntryController($scope) {
  
  
  $scope.LoadSessionData=function(val)
  {
    
     console.log(val);
    
   
    
  };
  
      $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));
        }
  
    
  $scope.test = function(data, index){
    console.log(data)
    var newArray = $scope.configs.filter(function (config) {
  return config.name == data;
});
    console.log(newArray)
    if(newArray.length){
      var new_changed_config = $scope.changed_configs[index];
      new_changed_config.id = newArray[0].id;
    }
  }
  
  
  
  
  
}

<!DOCTYPE html>
<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>


<div ng-app="" ng-controller="cntryController">


    <table cellspacing="10" cellpadding="10">
        <tr>
            <th>Config Name</th>
            <th>Config Value</th>
        </tr>
        <tr ng-repeat="changed_config in changed_configs">
            <td>
                <input type="text" class="form-control" ng-model="changed_config.name" list="names" ng-change="test(changed_config.name, $index)">                
                <datalist id="names">
                    <option ng-repeat="option in configs | filter:search | limitTo:30" value={{option.name}}>{{option.name}}
                    </option>
                </datalist>
            </td>
            <td>
                <input type="text" class="form-control" ng-model="changed_config.id"/>
            </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>

</div>

</html>

请运行上面的sn-p

Here is a working DEMO

【讨论】：

还有，你正在初始化changed_config
我也试过了。如果我绑定对象，<datalist> 上方的输入字段显示[object Object] 并且也绑定相同。
changed_config 在控制器中初始化
我已编辑问题以包含控制器代码
changed_reward_configs 是什么，您在 html 中使用了 changed_config，但控制器中没有它