Can you please make a plunkr?
On Sun, May 17, 2015 at 12:48 PM, Abbott Fleur <[email protected]>
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.
>
--
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.
