Search code examples
javascriptangularjsangularangular-ngmodelangularjs-ng-model

Bind different property than what is shown in the html component

Consider I have a list of objects like -

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

I use the following to search through the config list and bind the selected config to another variable called 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>

Controller Code(Not complete code, just relevant snippets):

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));
        }
}

Currently the code displays and binds the name of the selected config to the changed_config variable. But I need the id to be bound to the changed_config variable and the name to be displayed in the html.

If I change the <option> to use id, then id will be displayed.

How do I bind one property to a variable but show another in the html??

Solution

  • Here is the solution you needed,

    Procedure:

    1. When an option is selected from datalist I m checking for that change
    2. That change is observed through input on which datalist is added
    3. On that input change i,e when option is selected I m assigning that id to id key of respective changed_config
    4. That is inturn displayed in second textbox
    5. 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>

    Please run the above snippet

    Here is a working DEMO