绑定与 html 组件中显示的内容不同的属性

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

这是您需要的解决方案，

程序：

When an option is selected from datalist I m checking for that change

That change is observed through input on which datalist is added

On that input change i,e when option is selected I m assigning that id to id key of respective changed_config

That is inturn displayed in second textbox

It works for 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>

请运行以上片段

Here is a working DEMO

绑定与 html 组件中显示的内容不同的属性

Bind different property than what is shown in the html component

javascript

angularjs

angular

angular-ngmodel

angularjs-ng-model

绑定与 html 组件中显示的内容不同的 属性

Bind different property than what is shown in the html component

javascript

angularjs

angular

angular-ngmodel

angularjs-ng-model

绑定与 html 组件中显示的内容不同的属性