What is the best way to assign an ngModel dynamically using a dot-separated path?

Question

What is the best way to assign an ngModel dynamically using a dot-separated path?

I have noticed a few questions that are similar to this one, but my question has a slight variation.

In my controller, I have an object that resembles the following:

$scope.data = {
  foo: {bar: 1,
        bas: 2},
  biz: 3,
  blat: 4
};

My goal is to create an input field where the ng-model can be dynamically assigned to any of those values.

<label>Define Model</label>
<input type="text" ng-model="input.model" />

<label>Data for {{input.model}}:</label>
<input type="text" ng-model="{{input.model}}">

Essentially, I would like to be able to set the "Define Model" input to something like data.foo.bas and have the corresponding "Data for data.foo.bas" input display a value of 2.

I am aware that I can achieve a similar result with the following code:

<label>Define Model</label>
<input type="text" ng-model="input.model" />

<label>Data for {{input.model}}:</label>
<input type="text" ng-model="data[input.model]">

However, this method only allows me to access the biz and blat attributes. Does anyone have any suggestions on how this can be accomplished? Thank you.

javascript angularjs model

Answer 1

Answer №1

If you want to extract values from $parse

$scope.$watch('input.model', function(newVal) {
    $scope.definedModel = $parse(newVal)($scope.data);
});

In this case, $parse will look for a match in $scope.data and assign it to definedModel

Check out this plunker

Answer 2

If you want to extract values from $parse

$scope.$watch('input.model', function(newVal) {
    $scope.definedModel = $parse(newVal)($scope.data);
});

In this case, $parse will look for a match in $scope.data and assign it to definedModel

Check out this plunker

Answer 3

Answer №2

If you want to achieve this, you will need to make a small adjustment to the structure of your data array. Each model should have its own object instead of just being a primitive, all with a common structure:

var data = {
  foo: {
    bar: {
      value: 1
    },
    bas: {
      value: 2
    }
  },
  biz: {
    value: 3
  },
  blat: {
    value: 4
  }
};

This adjustment allows you to pass the objects around so that ngModel can still refer to (and modify) the original object.

You will also need a function to convert a "path" like "foo.bas" to retrieve the correct object, you can refer to this answer for guidance:

var getProperty = function(obj, prop) {
  var parts = prop.split('.'),
      last = parts.pop(),
      l = parts.length,
      i = 1,
      current = parts[0];

  if (l === 0) return obj[prop];

  while((obj = obj[current]) && i < l) {
      current = parts[i];
      i++;
  }

  if(obj) {
      return obj[last];
  }
}

Additionally, you must monitor the input.model variable to ensure that the scope's model variable is assigned to the correct object:

$scope.$watch('input.model', function(name) {
  $scope.model = getProperty(data, name);
});

Finally, all of this is controlled by inputs that define "input.model" and "model" on the scope:

<input placeholder="Model name" ng-model="input.model" />
<input placeholder="Model value" ng-model="model.value" />

You can see this in action in this Plunker.

Edit: Alternatively, according to the answer from @Reza, you can use $parse instead of the getProperty function mentioned above. With this method, the watcher can be simplified to:

$scope.$watch('input.model', function(name) {
  $scope.model = $parse(name)(data);
});

You can view this alternative approach in action in this Plunker. It is indeed a neater solution with less code.

Answer 4

If you want to achieve this, you will need to make a small adjustment to the structure of your data array. Each model should have its own object instead of just being a primitive, all with a common structure:

var data = {
  foo: {
    bar: {
      value: 1
    },
    bas: {
      value: 2
    }
  },
  biz: {
    value: 3
  },
  blat: {
    value: 4
  }
};

This adjustment allows you to pass the objects around so that ngModel can still refer to (and modify) the original object.

You will also need a function to convert a "path" like "foo.bas" to retrieve the correct object, you can refer to this answer for guidance:

var getProperty = function(obj, prop) {
  var parts = prop.split('.'),
      last = parts.pop(),
      l = parts.length,
      i = 1,
      current = parts[0];

  if (l === 0) return obj[prop];

  while((obj = obj[current]) && i < l) {
      current = parts[i];
      i++;
  }

  if(obj) {
      return obj[last];
  }
}

Additionally, you must monitor the input.model variable to ensure that the scope's model variable is assigned to the correct object:

$scope.$watch('input.model', function(name) {
  $scope.model = getProperty(data, name);
});

Finally, all of this is controlled by inputs that define "input.model" and "model" on the scope:

<input placeholder="Model name" ng-model="input.model" />
<input placeholder="Model value" ng-model="model.value" />

You can see this in action in this Plunker.

Edit: Alternatively, according to the answer from @Reza, you can use $parse instead of the getProperty function mentioned above. With this method, the watcher can be simplified to:

$scope.$watch('input.model', function(name) {
  $scope.model = $parse(name)(data);
});

You can view this alternative approach in action in this Plunker. It is indeed a neater solution with less code.

Answer 5

Answer №3

Have you considered recompiling the component with the specified ng-model attribute? Check out this link for more information: https://gist.github.com/djdmbrwsk/9a7004492a709044e597

Answer 6

Have you considered recompiling the component with the specified ng-model attribute? Check out this link for more information: https://gist.github.com/djdmbrwsk/9a7004492a709044e597

What is the best way to assign an ngModel dynamically using a dot-separated path?

Answer №1

Answer №2

Answer №3

Similar questions

Initializing an Express app with JSON file loading

Top method for extracting mesh vertices in three.js

What is the best way to darken the background when an alert is displayed and disable the dimming effect when the alert is closed?

Is there a way to upload files in AngularJS without using AJAX or jQuery?

tips for successfully transferring date and time data between json and nosql databases like firestore

Error occurs when page rendering is stuck in a recursive loop: Excessive re-renders detected

Automatically activate the Focus Filterfield in the ng-multiselect-dropdown upon clicking

Transform CSS into React.js styling techniques

AngularJS allows for the creation of 2D arrays using the $Index

How is it possible for the output to be a string array when the variable was declared as a number in TypeScript?

The issue with calling Ajax on button click inside a div container is that the jQuery dialog box is

Is jQuery Autocomplete functioning properly on outdated browsers, but not on newer ones?

I am interested in displaying the PDF ajax response within a unique modal window

Extracting dynamic content from a webpage using Selenium with Javascript rendering capabilities

The function Router.push("/") is not functioning as expected when called within the pages/index.js file

Conceal particular table cells through jQuery

Vue 2 checkbox form array data

The initial render in a Kanban board seems to be causing issues with the functionality of react-beautiful-dnd

Updating data for a heatmap in Angular-Leaflet

Waiting for Angular's For loop to complete