Question

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

最初我只有一个按钮加载“添加列表”，添加列表用户可以添加多个列表，其中每个列表都有一个按钮（“添加阶段”），点击添加阶段它应该显示与该阶段相关的内容。

我是以动态的方式做这件事。

我的HTML看起来像：

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

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

我的控制器如下：

    $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的方式。您并不需要JS中的所有$compile和HTML。让Angular做繁重的工作。在控制器中使用一系列列表，并使用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>

在你的控制器中：

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

这只是为了表明您可以在该阶段<li>中包含任何HTML。如果需要在指令上传递属性，则可以这样做。唯一性由track by值定义。在示例中，这可以是$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>

然后在控制器中：

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

Answer 2

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

    $scope.phase = function ($event) {
        var name2html = '<div>123</div>';
        var name2 = $compile(name2html)($scope);
        var drop = $event.target.parentNode.querySelector('.drop'); // we get the right div tag with class drop
        angular.element(drop).append(name2);
    };

Answer 3

试

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


$scope.phase =function($event){

var name2html = '<div>123</div>';
var name2 = $compile(name2html)($scope);
angular.element($event.currentTarget).next().append(name2);

}

并删除id，因为只要触发phase

，它就会被复制

Answer 4

使用重复作为＆＃34;模板＆＃34; - 注意反映列表中项目的textarea：

http://jsfiddle.net/0088orkk/1/

＆＃34;用户创建的列表生成的对象＆＃34;输入的值可以很容易地发送，存储或操作。

<div ng-app ng-controller="MyCtrl">
<input type="button" value="addList" ng-click="addList()"/><br/><br/>

<ul>
        <li ng-repeat="item in items">   <input type="button" value="addPhase" ng-click="addPhase(item)"/>
          <div  ng-repeat="phase in item.phases">
          {{phase.value}}
          <form>
          <input type="text" ng-model="phase.Value1"/>
          <input type="text" ng-model="phase.Value2"/>
          <input type="text" ng-model="phase.Value3"/>
          </form>
          </div>
        </li>
    </ul><br/>
    <br/>
     <hr/>
    <br/>
    Items:<br/>
<textarea style="width:400px;height:400px">{{items}}</textarea>   

</div>



function MyCtrl($scope) {


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


    item.phases.push({value:123});
};


}

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

4 个答案: