动态ng-init-AngularJS

Question

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){ [...]

Answer 1

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>

plunker example