Question

我正在尝试创建一种切换动态创建的信息行的方法。我已经尝试过使用ng-init，然后将它传递给一个函数，但是我在某个地方搞砸了，我似乎无法理解这是怎么回事。我认为，差距在于将连接范围变量用于其他地方。我正在使用Bootstrap 3和AngularJS 1.5。

HTML：

<div class="row" data-ng-repeat="equipment in task.equipment">
  <div class="col-md-12">
    <h4 class="green-text">
      {{ equipment.equipId }}
      <small class="green-text">
        <i class="glyphicon" 
          data-ng-class="{'glyphicon-triangle-bottom': field{{ $index }}, 'glyphicon-triangle-right': !field{{ $index }}}" 
          data-ng-init="equipment['field' + $index] = true" 
          data-ng-click="toggleTaskEquip('field{{ $index }}')">
        field{{ $index }}: I WANT THIS TO WORK</i>
      </small>
    </h4>
  </div>
  <div data-ng-show="field{{ $index }}">
          ...stuff here...
  </div>
</div>

JS：

$scope.toggleTaskEquip = function(toggleBool)
  {
    if (toggleBool === true)
      $scope.isTaskEquipOpen = false;
    else if (toggleBool === false)
      $scope.isTaskEquipOpen = true;
  };

Answer 1

如果我正确理解了问题，您希望能够通过点击切换boolean中创建的ng-init。

我认为你需要这个：

<div class="container-fluid">
  <div ng-controller="MyCtrl">
    <div class="row" data-ng-repeat="equipment in task.equipment">
      <div class="col-md-12">
        <h4 class="green-text">
          {{equipment.equipId}}
          <small class="green-text">
            <i class="glyphicon" 
               data-ng-class="{'glyphicon-triangle-bottom': isVisible, 'glyphicon-triangle-right': !isVisible}"
               data-ng-init="isVisible = true" 
               data-ng-click="isVisible = !isVisible">I WANT THIS TO WORK</i>
          </small>
        </h4>
      </div>
      <div data-ng-show="isVisible">
        ...stuff here...
      </div>
    </div>
  </div>
</div>

您甚至不需要toggleTaskEquip上的$scope功能。

JSFiddle here。

ng-repeat会创建一个new scope for each template instance，因此您只需为isVisible中equipment的每个isVisible = true创建单独的ng-init。< / p>

为动态创建的范围变量赋值

1 个答案: