[SOLVED] How can I set a dynamic model name in AngularJS?- Angular.js Recipes

  • Everything works, except the model is literally Answers[“{{question.Name}}”], instead of the evaluated Answers[“GenderQuestion”].
  • How can I set that model name dynamically?
  • I want to populate a form with some dynamic questions (fiddle here ):

    To solve all kind of situations, you can use this directive:

    You can use something like this scopeValue[field] , but if your field is in another object you will need another solution.

  • To make the answer provided by @abourget more complete, the value of scopeValue[field] in the following line of code could be undefined.
  • This would result in an error when setting subfield:

    One way of solving this problem is by adding an attribute ng-focus=”nullSafe(field)”, so your code would look like the below:

    Then you define nullSafe( field ) in a controller like the below:

    This would guarantee that scopeValue[field] is not undefined before setting any value to You can’t use ng-change=”nullSafe(field)” to achieve the same result because ng-change happens after the ng-model has been changed, which would throw an error if scopeValue[field] is undefined.

http://jsfiddle.net/DrQ77/

You can simply put javascript expression in ng-model.


@angular_recipe: How can I set a dynamic model name in AngularJS? #Angular #AngularJS

I want to populate a form with some dynamic questions (fiddle here):

  • {{question.Text}}

Submit

​ function QuestionController($scope) { $scope.Answers = {}; $scope.Questions = [ { “Text”: “Gender?”, “Name”: “GenderQuestion”, “Options”: [“Male”, “Female”]}, { “Text”: “Favorite color?”, “Name”: “ColorQuestion”, “Options”: [“Red”, “Blue”, “Green”]} ]; $scope.ShowAnswers = function() { alert($scope.Answers[“GenderQuestion”]); alert($scope.Answers[“{{question.Name}}”]); }; }​

, but if your field is in another object you will need another solution.

To solve all kind of situations, you can use this directive:

Html example:

To make the answer provided by @abourget more complete, the value of scopeValue[field] in the following line of code could be undefined. This would result in an error when setting subfield:

One way of solving this problem is by adding an attribute ng-focus=”nullSafe(field)”, so your code would look like the below:

Then you define nullSafe( field ) in a controller like the below:

This would guarantee that scopeValue[field] is not undefined before setting any value to scopeValue[field][subfield].

Note: You can’t use ng-change=”nullSafe(field)” to achieve the same result because ng-change happens after the ng-model has been changed, which would throw an error if scopeValue[field] is undefined.

What I ended up doing is something like this:

In the controller:

so in the templates I could use totally dynamic names, and not just under a certain hard-coded element (like in your “Answers” case):

Hope this helps.

Angular.js Recipes are structured in a Cookbook format featuring recipes that contain problem statements and solutions. A detailed explanation follows each problem statement of the recipe. This is usually contained within the solution; however, an optional discussion section can often contain other useful information helping to demonstrate how the solution works.

Angular.js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Lost? Begin by working through Angular’s Getting Started Guide to get yourself up-and-running.

[SOLVED] How can I set a dynamic model name in AngularJS?- Angular.js Recipes

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.