【问题标题】:Dynamic ng-init - Angularjs动态 ng-init - Angularjs
【发布时间】:2025-12-09 19:30:01
【问题描述】:

我知道了:

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

【问题讨论】:

  • 为什么使用 ng-model 不好?
  • 我不能在 ng-model 上使用 {{d.subtopic}} 复选框,我读过一些关于它的内容。最好使用 ng-checked
  • 您应该使用ng-model="d.subtopic" 为什么要添加“复选框”?
  • 我知道,这是我尝试的第一件事,但它不起作用。复选框就像一个 id,我在另一边也有 d.subtopicButton 并且工作正常
  • 哦,好吧,如果我是对的,你应该使用ng-model="d.['subtopicCheckbox']"

标签: javascript angularjs checkbox ng-init


【解决方案1】:

这是你想要达到的目标吗?

<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

【讨论】:

  • 我需要像 2º 这样的东西,但不在那里使用 $scope,它就像是两者的混合。我需要 d.subtopic.checked 作为模型,但它不起作用。
  • 然后使用"Checkboxes[d.subtopic+'Checked']" 并将$scope.Checkboxes={}; 添加到您的模型中。
  • 但是你会因为同样的子主题而受苦。所以它应该像"Checkboxes[d.subtopic+$index+'Checked']" 或类似的东西
  • "Checkboxes[d.subtopic+'Checked']" 不能被 ng-model 识别,也不能被 ng-init 识别
  • @vict 您必须将$scope.Checkboxes={}; 添加到您的模型或ng-init="Checkboxes={};" ng-repeat 之外的某个位置