javascript - Angular js 我无法动态调用我的按钮

Question

我需要你的帮助来解决这个问题...我是 Angular 新手，刚刚开始在地面上玩。

最初，我在加载“添加列表”时只有一个按钮，通过添加列表，用户可以添加多个列表，每个列表本身都有一个按钮(“添加阶段”)，单击“添加阶段”时，它应该显示与该阶段相关的内容。

我以动态的方式完成这一切。

我的 HTML 看起来像:

<button ng-click="list()">add list</button>

<div id="container"></div>

我的 Controller 看起来像:

    $scope.list =function(){
    var name1html = '<div id="ide"><button ng-click="phase()">Add Phase</button><div id="drop"></div></div>';
    var name1 = $compile(name1html)($scope);
    angular.element(document.getElementById('container')).append(name1);
    }


    $scope.phase =function(){

    var name2html = '<div>123</div>';
    var name2 = $compile(name2html)($scope);
    angular.element(document.getElementById('drop')).append(name2);

    }

实际输出: On click of 2nd Add phase button it is again adding to 1st button

预期输出: Im expecting something like this

Answer 1

我认为你没有以 Angular 的方式思考事情。你并不真的需要所有这些 $compile以及 JS 中的 HTML。让 Angular 来完成繁重的工作。在 Controller 中使用列表数组，并使用 ng-repeat 在标记中迭代它。您可以为每个列表内的阶段嵌套一个内部 ng-repeat。像这样的事情:

<button ng-click="addList()">Add list</button>
<div>
  <div ng-repeat="list in lists track by $index">
    <div>
      <button ng-click="addPhase($index)">Add Phase</button>
      <ul>
        <li ng-repeat="phase in list.phases track by $index">
          {{ phase }}
        </li>
      </ul>
    </div>
  </div>
</div>

在你的 Controller 中:

$scope.lists = [];

$scope.addList = function() {
  $scope.lists.push({ phases: [] });
};

$scope.addPhase = function($index) {
  $scope.lists[$index].phases.push('123');
};

为了更好地衡量，这里有一个 working Plunker

注意:我从标签中删除了 id，因为 Angular 不需要它们(它在内部跟踪它们)，但如果您确实需要它们，可以使用 $index向它们添加一个数值(对于@DmitriyLoskutov 来说，id 属性应该是唯一的，而您试图添加具有相同 id 值的多个元素)。

编辑:

您可以在阶段中放置任何内容。像这样:

<button ng-click="addList()">Add list</button>
<div>
  <div ng-repeat="list in lists track by $index">
    <div>
      <button ng-click="addPhase($index)">Add Phase</button>
      <ul>
        <li ng-repeat="phase in list.phases track by $index">
          <div data-exp-page exp-page-attribute-one="{{$index}}" exp-page-attribute-two="{{phase.name}}"></div>
        </li>
      </ul>
    </div>
  </div>
</div>

这只是为了表明您可以在该阶段中包含任何 HTML <li> 。如果您需要在指令上传递属性，您可以这样做。唯一性由 track by 定义。值(value)。这可以是 $index在示例中，由于不存在具有任何唯一值的现有模型，或者如果您有具有唯一属性(例如数据库记录)的现有模型，您可以更改 $index至list.uuid或其他什么。

您还可以使用$parent.$index从阶段内访问列表。 - 例如，如果您想删除添加的阶段，您可以执行以下操作:

<li ng-repeat="phase in list.phases track by $index">
  <div>
    <input type="text" name="phase-name-{{$index}}" ng-model="phase.name">
    <button type="button" ng-click="removePhase($parent.$index, $index)">Remove this phase</button>
  </div>
</li>

然后在 Controller 中:

$scope.removePhase = function($listIndex, $phaseIndex) {
  $scope.lists[$listIndex].phases.splice($phaseIndex, 1);
};