Question

我正在使用AngularJS。我正在生成类似管道的结构。首先onload我有一个默认的ng-repeat值。点击“添加更多”后，我显示另一个列表。只要我点击“添加”按钮，它就会继续添加。

现在，对于每个创建的新管道，我想分配不同的名称，如pipeline1，pipeline2等。我使用count来生成1的随机数。

这是我的HTML：

添加按钮

    <button data-ng-click="count=count+1;addNew();addCount(count)" data-ng-
    init="count=0">Add New Workboard</button>

将使用管道名称创建新管道。

    <div class="col-xs-12 col-sm-4 col-md-4" data-ng-
    show="listOfLists.length > 0">
    <div data-ng-repeat="list in listOfLists">
    <ul class="simpleDemo row">
    <li data-ng-repeat="workboard in list">
    {{workboard.Name}} 
    </li>
    </ul>
    </div> 
    <div style="width: 65%; float: left; height: auto;">
    <p class="weak">Workboard Pipeline Name:</p>
    <div class="form-group">
    <input data-ng-model="pipelineName">
    </div>
    </div>

Controller.js

    $scope.listOfLists = [];
    $scope.workboardStagesWithDefault = [
    {
    Name:"Test"
    },
    {
    Name:"Test2"
    },
    {
    Name:"Test3"
    }
    ];

    $scope.addNew = function(){
       var clonedList = angular.copy($scope.workboardStagesWithDefault);
       $scope.listOfLists.push(clonedList);
    };
     $scope.addCount = function (count) {
         console.log(count);
         $scope.pipelineName = 'Pipeline'+count;
     };

在点击添加按钮后，我得到相同的管道名称，因为我正在进行绑定。如果我单击两次添加按钮，它将显示两个管道的管道2。如何分配使用管道字符串计算值的不同管道名称？

Answer 1

因此，您可以在ng-repeat内执行此操作，而不是创建函数addCount()。

请参阅以下代码：

我在Workboard Pipeline Name: Pipeline {{$index+1}}内添加了ng-repeat。这将显示Workline Pipeline Name，如Pipeline 2，Pipeline 1等。

  <div class="col-xs-12 col-sm-4 col-md-4" data-ng show="listOfLists.length > 0">
    <div data-ng-repeat="list in listOfLists track by $index">   
     Workboard Pipeline Name: Pipeline {{$index+1}}       
      <ul class="simpleDemo row">
        <li data-ng-repeat="workboard in list">
         {{workboard.Name}} 
        </li>
      </ul>
    </div> 
  </div>

将$ scope变量分配给计数为

1 个答案: