Without questioning the wisdom of your setup (such as manipulating DOM in your controller), one problem is clear: You have not defined/extracted AgeParams as a scope variable/array anywhere in your controller. In ng-repeat the syntax 'a in B' means: "handle object 'a' inside scope variable/array 'B'". Where is your scope variable AgeParams defined?
Also, I suggest you look at the simple ng-repeat directive examples in the AngularJS docs <https://docs.angularjs.org/api/ng/directive/ngRepeat> and make sure have them running. Let me know how it goes. On Sunday, May 17, 2015 at 11:48:30 AM UTC-4, Abbott Fleur wrote: > > I have a JSON string converted to object which I am trying to iterate over > to create table rows. Although I an able to use the simple properties > (AllocationAmount, etc.), the AgeParams array does not seem to be able to > be repeated. - -Notice, I assign the controller twice in the high level > DIVs. Trying to figure what I'm doing wrong. > > Data: Json in hidden input > <input id="kbo_input_sliders" type="hidden" > value='{"AppendToOrder":false,"AllocationAmount":100,"BooksPerTitle":3,"UserBooksPerTitle":0,"CartQuantity":0,"CartSubTotal":0.0,"CustomerId":0,"DistributorId":0,"IncludeExcludeGuid":"","AllocationType":"Budget","ZipCode":"10506", > "AgeParams":[ > > {"Color":"#FF0000","Name":"Baby-3","ShortName":"B-3","Index":0,"CategoryId":38,"Percent":25.0,"IsLocked":false}, > {"Color":"#008000","Name":"Ages > 4-8","ShortName":"4-8","Index":1,"CategoryId":34,"Percent":25.0,"IsLocked":false}, > {"Color":"#0000FF","Name":"Ages > 9-12","ShortName":"9-12","Index":2,"CategoryId":37,"Percent":25.0,"IsLocked":false}, > {"Color":"#FFA500","Name":"Young > Adult","ShortName":"Y/A","Index":3,"CategoryId":36,"Percent":25.0,"IsLocked":false} > ]}'> > > App & Controller: > > var app = angular.module('KboApp', []) > app.controller("Kbo-AllocationCtlr", function($scope) { > var allocateItems = $("#kbo_input_sliders").val(); > var allocationItems = JSON.parse(allocateItems); > var nsAllocations = > { > AllocationItems: allocationItems, > }; > $scope.ns = nsAllocations; > $scope.allocationTypes = [ > { > "name": "Budget" > }, { > "name": "Quantity" > } > ]; > }); > > This is the ng-repeat td Div: > > <div ng-controller="Kbo-AllocationCtlr" id="kbo-age-sliders"> > <table> > <tr ng-repeat="AgeParam in AgeParams"> > <td>Hello World</td> > <td id='{{AgeParam.Index}}-age' class = > 'kbo-age-name-col'>% {{AgeParam.Name}}</td> > <td class='kbo-age-percent-col' > <input > id='{{AgeParam.Index}}-percent' class='kbo-age-percent' type='Number' > min='0' max='100' value='{{AgeParam.Percent}}'/></td> > <td class='kbo-age-slider-col'> > <div id='{{AgeParam.Index}}-ageslider' > class='kbo-age-slider'></div> > </td> > <td class='kbo-age-locked-col'> > <label>Locked<input > id='{{AgeParam.Index}}-islocked' > class='kbo-islocked' > type='checkbox' > name="checkbox" > ng-model="IsLocked" > ng-true-value="'Checkbox Checked'" > ng-false-value="'Checkbox Unchecked'" > ng-change="toggleCheckbox()"/> > > </label> > </td> > </tr> > </table> > </div> > > The generated html is ... > > <div class="ng-scope" id="kbo-age-sliders" > ng-controller="Kbo-AllocationCtlr"> > <table> > <tbody><!-- ngRepeat: AgeParam in AgeParams --> > </tbody></table> > </div> > > AngularJs throws lots of unhelpful error messages: > > Error: [$parse:syntax] > http://errors.angularjs.org/1.4.0-rc.2/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7BAllocationType%7D%7D&p4=%7BAllocationType%7D%7D > at q.prototype.throwError ( > http://localhost:1155/jscripts/angular.min.js:207:280) > at q.prototype.object ( > http://localhost:1155/jscripts/angular.min.js:207:70) > at q.prototype.primary ( > http://localhost:1155/jscripts/angular.min.js:204:61) > at q.prototype.unary ( > http://localhost:1155/jscripts/angular.min.js:203:298) > at q.prototype.multiplicative ( > http://localhost:1155/jscripts/angular.min.js:203:146) > at q.prototype.additive ( > http://localhost:1155/jscripts/angular.min.js:202:482) > at q.prototype.relational ( > http://localhost:1155/jscripts/angular.min.js:202:317) > at q.prototype.equality ( > http://localhost:1155/jscripts/angular.min.js:202:142) > at q.prototype.logicalAND ( > http://localhost:1155/jscripts/angular.min.js:201:499) > at q.prototype.logicalOR ( > http://localhost:1155/jscripts/angular.min.js:201:346) > > > > > > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
