How can I dynamically assign ngModel in AngularJS?

Question

How can I dynamically assign ngModel in AngularJS?

I've created a directive with an isolate scope that maps a list of objects to inputs for modifying a specific property. However, I now aim to make this component more universal by allowing it to bind to deeply nested properties within each object.

For instance, consider a list of people with names spoken in various languages:


    var people = [
      {
        age: 31,
        multilang_attributes: {
          en: {name: 'John'},
          ru: {name: 'Иван'}
        }
      },
      {
        age: 29,
        multilang_attributes: {
          en: {name: 'Peter'},
          ru: {name: 'Пётр'}
        }
      },
    ];

I'd like to use my universal component on this list of people as shown below:

<input-list
    items="people",
    item-model="multilang_attributes[locale].name"
  ></input-list>

I attempted creating a scope property using `&` to execute the expression in the parent scope and then pass it to `ngModel`, but encountered issues. You can check out my attempt on plunkr here.

What would be the best approach to solve this task in Angular?

javascript angularjs

Answer 1

Answer №1

To handle this situation, one approach is to $parse the accessor-string and implement a getter/setter for the model. Here's how:

Update the directive-html as follows:
```
item-accessor="'multilang_attributes.' + app.locale + '.name'"
```
This will create a reference like multilang_attributes.en.name.

Modify the directive-code by doing the following:

app.directive('inputList', function () {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      itemAccessor: '='
    },
    template: '<ul><li ng-repeat="item in items"><input ng-model="getModel(item)" ng-model-options="{ getterSetter: true }" /></li></ul>',
    
    controller: function ($scope, $parse) {
      $scope.getModel = function(item) {
        return function (newValue) {
          var getter = $parse($scope.itemAccessor);
          
          if (arguments.length > 0) {
            getter.assign(item, newValue);
          }
          
          return getter(item);
        };
      };
    }
  };
});

Try out the live demo here: http://plnkr.co/edit/VzFrBxNcsA5BarIVr6oG?p=preview

var app = angular.module('TestApp', [])

app.controller('AppCtrl', function AppController() {
    
  this.locales = ['en', 'fr']
  this.locale = 'en';
  
  this.people = [
    {
      age: 31,
      multilang_attributes: {
        en: {name: 'John (en)'},
        fr: {name: 'John (fr)'}
      }
    },
    {
      age: 29,
      multilang_attributes: {
        en: {name: 'Fred (en)'},
        fr: {name: 'Fred (fr)'}
      }
    },
  ];
  
});
  
app.directive('inputList', function () {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      itemAccessor: '='
    },
    template: '<ul><li ng-repeat="item in items"><input ng-model="getModel(item)" ng-model-options="{ getterSetter: true }" /></li></ul>',
    
    controller: function ($scope, $parse) {
      
      $scope.getModel = function(item) {
        return function (newValue) {
          var getter = $parse($scope.itemAccessor);
          
          if (arguments.length > 0) {
            getter.assign(item, newValue);
          }
          
          return getter(item);
        };
      };
    }
  };
});

<!DOCTYPE html>
<html>
  <head>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1978777e6c75786b37736a5928372d372e">[email protected]</a>" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
  </head>

  <body ng-app="TestApp" ng-controller="AppCtrl as app">
    <div class="container">
      <select ng-model="app.locale" ng-options="v as v for v in app.locales"></select>
      <hr>
      
      <input-list
        items="app.people"
        item-accessor="'multilang_attributes.' + app.locale + '.name'"
      ></input-list>
      
      <hr>
      <pre>{{ app.people|json }}</pre>
    </div>
  </body>
</html>

Please keep in mind that using proper injection-syntax and controllerAs/bindToController would be advisable.

Answer 2

To handle this situation, one approach is to $parse the accessor-string and implement a getter/setter for the model. Here's how:

Update the directive-html as follows:
```
item-accessor="'multilang_attributes.' + app.locale + '.name'"
```
This will create a reference like multilang_attributes.en.name.

Modify the directive-code by doing the following:

app.directive('inputList', function () {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      itemAccessor: '='
    },
    template: '<ul><li ng-repeat="item in items"><input ng-model="getModel(item)" ng-model-options="{ getterSetter: true }" /></li></ul>',
    
    controller: function ($scope, $parse) {
      $scope.getModel = function(item) {
        return function (newValue) {
          var getter = $parse($scope.itemAccessor);
          
          if (arguments.length > 0) {
            getter.assign(item, newValue);
          }
          
          return getter(item);
        };
      };
    }
  };
});

Try out the live demo here: http://plnkr.co/edit/VzFrBxNcsA5BarIVr6oG?p=preview

var app = angular.module('TestApp', [])

app.controller('AppCtrl', function AppController() {
    
  this.locales = ['en', 'fr']
  this.locale = 'en';
  
  this.people = [
    {
      age: 31,
      multilang_attributes: {
        en: {name: 'John (en)'},
        fr: {name: 'John (fr)'}
      }
    },
    {
      age: 29,
      multilang_attributes: {
        en: {name: 'Fred (en)'},
        fr: {name: 'Fred (fr)'}
      }
    },
  ];
  
});
  
app.directive('inputList', function () {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      itemAccessor: '='
    },
    template: '<ul><li ng-repeat="item in items"><input ng-model="getModel(item)" ng-model-options="{ getterSetter: true }" /></li></ul>',
    
    controller: function ($scope, $parse) {
      
      $scope.getModel = function(item) {
        return function (newValue) {
          var getter = $parse($scope.itemAccessor);
          
          if (arguments.length > 0) {
            getter.assign(item, newValue);
          }
          
          return getter(item);
        };
      };
    }
  };
});

<!DOCTYPE html>
<html>
  <head>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1978777e6c75786b37736a5928372d372e">[email protected]</a>" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
  </head>

  <body ng-app="TestApp" ng-controller="AppCtrl as app">
    <div class="container">
      <select ng-model="app.locale" ng-options="v as v for v in app.locales"></select>
      <hr>
      
      <input-list
        items="app.people"
        item-accessor="'multilang_attributes.' + app.locale + '.name'"
      ></input-list>
      
      <hr>
      <pre>{{ app.people|json }}</pre>
    </div>
  </body>
</html>

Please keep in mind that using proper injection-syntax and controllerAs/bindToController would be advisable.

How can I dynamically assign ngModel in AngularJS?

Answer №1

Similar questions

WebDriverError: The preference value for network.http.phishy-userpass-length in Firefox is not valid: exceeds maximum allowed length

Troubleshooting: Resolving the "npm ERR! missing script: start" Issue

Passing arguments to EJS view with Express

What is the best way to assign a series of radio buttons to an array within an Angular controller's model?

Vue JS i18next: Handling Single Translation String Fallbacks

Creating immersive experiences with fabric.js in fullscreen mode on canvas

Ways to verify if TypeScript declaration files successfully compile with local JavaScript library

What is the best way to calculate the time elapsed between two consecutive double clicks using jQuery?

Discord.js counter feature

Exploring the integration of Ant Design Vue within HTML code

How can I use Angular forEach to retrieve both the name of a JSON key and its corresponding

Having trouble with adding data from an array of objects to an HTML element using jQuery's each method

Real-time monitoring within a callback function in Angular 5

The Child/Parent arguments in Typescript methods cannot be assigned

Obtain $stateParams excluding UI-navigation

Failure to achieve success with jQuery Ajax

Employing the Map function in React leads to an error that is undefined

Modify the JSON file stored on the local server

Retrieving Filter Values with AngularJS - ngTable

eliminating items from an array nested inside another array