I got this:
<ul id="filterList">
<div ng-repeat="data in dataForTheTree">
<li> {{data.topic}} </li>
<ul id={{data.topic}}Son>
<li ng-repeat="d in data.children>
<input type="checkbox" ng-init='{{d.subtopic}}Checkbox = true' ng-checked = "{{d.subtopic}}Checkbox"/>{{d.subtopic}}
</li>
</ul>
</div>
</ul>
I need to create a "model" to know if the checkbox is checked or not (i can not use ng-model because is a bad practice). So, I am trying with ng-checked. ng-checked will not work if i can not initialise it. I want to try with ng-init because is the only thing that i have read about it.
I have read something about ng-init in a similar post, but i can not understand because I am so new in this world.
"You need to access dynamic properties using [] notation instead on . notation"
How can i do that in this example?
This is my .Json:
$scope.dataForTheTree =[
{ "topic" : "Legislation", "children" : [
{ "subtopic" : "Education", "texto" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tincidunt mi. Donec purus ligula, tincidunt ut semper eu, laoreet.", "children" : [] },
{ "subtopic" : "HealthService", "texto" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tincidunt mi. Donec purus ligula, tincidunt ut semper eu, laoreet.", "children" : [] },
{ "subtopic" : "Assets", "texto" : " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tincidunt mi. Donec purus ligula, tincidunt ut semper eu, laoreet.", "children" : [] },
{ "subtopic" : "LiquidAssets", "texto" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tincidunt mi. Donec purus ligula, tincidunt ut semper eu, laoreet.", "children" : [] },
{ "subtopic" : "Education", "texto" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tincidunt mi. Donec purus ligula, tincidunt ut semper eu, laoreet.", "children" : [] },
{ "subtopic" : "HealthService", "texto" : " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tincidunt mi. Donec purus ligula, tincidunt ut semper eu, laoreet.", "children" : [] },
{ "subtopic" : "HealthService", "texto" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tincidunt mi. Donec purus ligula, tincidunt ut semper eu, laoreet.", "children" : [] }
]}];
I want to link each checkbox with his subtopic, then I want to watch if the checkbox is checked through ng-checked = "{{d.subtopic}}Checkbox"
.
Now my problem is that "{{d.subtopic}}Checkbox"
is not initialised, and that is why I need to use ng-init.
The problem here is that ng-init does not understand {{}}, so I do not know how to solve this: '{{d.subtopic}}Checkbox = true'
Finally I just want to get a dynamic $scope, like for example:
var cad = subtopic+"Checkbox";
if($scope[cad] === true){ [...]
Is this what you are trying to achive?
<ul id="filterList">
<div ng-repeat="data in dataForTheTree">
<li> {{data.topic}} </li>
<ul id="{{data.topic}}Son">
<li ng-repeat="d in data.children">
<input type="checkbox" ng-init='d.Checked = true' ng-model="d.Checked" />
{{d.subtopic}}
<span ng-if="d.Checked">{{d.texto}}</span>
</li>
</ul>
</div>
</ul>
or this?
<li ng-repeat="d in data.children">
<input type="checkbox" ng-init="$scope[d.subtopic+'Checked'] = true"
ng-model="$scope[d.subtopic+'Checked']" />
{{d.subtopic}}
<span ng-if="$scope[d.subtopic+'Checked']">{{d.texto}}</span>
</li>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.