47518

How can I concatinate a ng-model value with a value from a ng-repeat

Question:

I want to loop through an array of objects that I receive from a REST service and create a dynamic form using the ng-repeat directive.

This is my form with a rating directive (taken for the UI Bootstrap library)

<form name="categoryRatingFrom" data-ng-submit="updateCategories(catRatings) > <div data-ng-repeat="cats in categories" class="form-group clearfix"> <label class="control-label">{{ cats.name }}</label> <div class="no-outline" data-rating data-ng-model=" // Here I want to concatenate {{ cats.id }} with the ng-model name catRatings // " data-max="6" data-rating-states="ratingOptions.ratingStates" data-on-hover="atmosphereRating.onHover(value)" data-on-leave="atmosphereRating.onLeave()"></div> </div> <form>

I want to set the data-ng-model value using the object name that I pass when submitting and the ID of the current object tin my loop/array, however I don't seem to be able to do this. Should I do the concatenation in the controller on receiving the object array using a loop and then set the data-ng-model using a value from the ng-repeat nothing is passed to the controller when submitting the form (see my code below):

// loop through the object adding a ng-model name that we match in our form... for (var i = 0, l = $scope.categories.length; i < l; i++) { $scope.categories[i]['modelId'] = 'catRatings.' + $scope.categories[i].id; }

I add the following to my HTML data-ng-model="cats.modelId" but nothing is passed to the controller when submitting - can any one help me with a solution or give me an answer to what I am doing wrong?

Answer1:

ng-model takes a variable, not a string value. I'm not sure what exactly you're trying to do but I would think it would be something like:

ng-model="catRatings[cats.id]"

However, I am not familiar with that directive so I'm not sure if it accepts a ng-model attribute.

Answer2:

I have created <a href="http://plnkr.co/edit/myBRzFOSmpxoC2z4jVMr" rel="nofollow">an example</a> that will be referenced throughout the post. The following variables are declared within the scope as follows.

$scope.data = [ { 'id' : 0, 'name' : 'Tim' }, { 'id' : 1, 'name' : 'John' } ]; $scope.ratings = [ '5 stars', '2 stars' ];

When you are setting your model to 'catRatings' + {{ cats.id }} that means somewhere you are declaring a $scope.catRatings1, $scope.catRatings2, etc. Instead you should bind directly the the category object as follows.

<label ng-repeat="person in data"> <input type="text" ng-model="person.name"> ... </label>

or bind to an array with a corresponding index

<label ng-repeat="person in data"> ... <input type="text" ng-model="ratings[$index]"> </label>

or bind to an array using the id...

<label ng-repeat="person in data"> ... <input type="text" ng-model="ratings[person.id]"> </label>

Recommend

  • How to get the current URL in Robot framework?
  • JavaScript Sort by Date on table not working
  • Creating a simple, full-width, infinite carousel with jQuery
  • +entityForName: could not locate an entity named 'Dogs' in this model.
  • Bootstrap - Scrollspy scrolling skipping second to last section
  • Why newly created functions can not be found by SQL Server?
  • Sort a list by a custom order
  • in r combine a list of lists into one list
  • Appending strings from json object on a condition together efficiently?
  • Get VS to highlight all .Net 3.5 SP1 method calls
  • View Controller Loads Twice - How Do I Fix It?
  • The model item passed into the dictionary is of type A, but this dictionary requires a model item of
  • Always require certain dependencies in RequireJS
  • Generate a unique string based on a pair of strings
  • Cannot invoke my method on the array type int[]
  • Django foreign key drop down
  • Outlines on links in IE9 remains when focus is changed
  • xcode don't localize specific strings
  • MS Access - How to change the linked table path by amend the table
  • Swift: Switch statement fallthrough behavior
  • java.lang.NoClassDefFoundError: com.parse.Parse$Configuration$Builder on below Lollipop versions
  • Nant, Vault & Windows Integrated Authentication
  • Bug in WPF DataGrid
  • Which linear programming package should I use for high numbers of constraints and “warm starts” [clo
  • jQuery tmpl and DataLink beta
  • How can I estimate amount of memory left with calling System.gc()?
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • KeystoneJS: Relationships in Admin UI not updating
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • trying to dynamically update Highchart column chart but series undefined
  • Java static initializers and reflection
  • How to stop GridView from loading again when I press back button?
  • unknown Exception android
  • MATLAB: Piecewise function in curve fitting toolbox using fittype
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app