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.
