动态ng-init - Angularjs

时间:2015-11-05 11:59:58

标签: javascript angularjs checkbox ng-init

我明白了:

<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>

我需要创建一个“模型”来知道是否选中了复选框(我不能使用ng-model,因为这是一个不好的做法)。所以,我正在尝试使用ng-checked。 如果我无法初始化,则ng-checked将无效。我想尝试使用ng-init,因为这是我读过的唯一内容。

我在类似的帖子中读过关于ng-init的一些内容,但我无法理解,因为我在这个世界上是如此新鲜。

“您需要使用[]表示法来访问动态属性,而不是使用。符号”

在这个例子中我该怎么做?

这是我的.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" : [] }
]}];

我想将每个复选框与其子主题相关联,然后我想查看是否通过ng-checked = "{{d.subtopic}}Checkbox"选中了复选框。

现在我的问题是"{{d.subtopic}}Checkbox"没有初始化,这就是我需要使用ng-init的原因。

这里的问题是ng-init不理解{{}},所以我不知道如何解决这个问题:'{{d.subtopic}}Checkbox = true'

最后,我只想获得一个动态$范围,例如:

var cad = subtopic+"Checkbox";

  if($scope[cad] === true){ [...]

1 个答案:

答案 0 :(得分:0)

这是你想要实现的目标吗?

<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>

还是这个?

    <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