簡體   English   中英

動態ng-init-AngularJS

[英]Dynamic ng-init - Angularjs

我懂了:

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

最后,我只想獲得一個動態的$ scope,例如:

var cad = subtopic+"Checkbox";

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

這是您要達到的目標嗎?

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

矮人的例子

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM