Question

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

这是我的HTML：

添加按钮

    <button data-ng-click="addNew()">Add New Workboard</button>

将使用管道名称和一个文本框创建新管道以添加stageNames

    <div data-ng-show="listOfLists.length > 0">
    <div data-ng-repeat="list in listOfLists"> 
    <div data-ng-repeat="pipeline in workboardstages track by $index">
    <div class="added-eachboard">
    <div class="form-group">
    <input name="pipelineName" id="pipelineName" data-ng-
    model="pipeline.pipelineName"  type="text">
    </div>
    <ul class="simpleDemo workboard-drags" data-ng-repeat="(key,
    workboardlist) in pipeline.workBoardStageMap">
    <li data-ng-if="pipeline.pipelineName == key" ng-repeat="workboard in
    workboardlist">{{workboard.stageName}} 
    <a href ="javascript:void(0)" data-ng-
    click="editWorkboardStage(workboard.stageId)"><img src = 
    "resources/zingy/images/Edit-Small.png" class="TableIcon"></a> 
    </li>
    </ul>
    <div>
    <p class="weak">Stage Name:</p>
    <div class="form-group">
    <input name="stageName" id="stageName" data-ng-
    model="newworkboard.stageName"  type="text">
    </div>
    </div>
    </div>            
    </div>
    </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.editWorkboardStage = function(stageId){
    AccountService.editWorkboardStage(stageId).then(function(response){
        $scope.newworkboard = response.data;
    });
    }

    $scope.getAllWorkboardStages = function(){
    AccountService.getAllWorkboardStages().then(function(response){
        $scope.workboardstages = response.data;
         $scope.listOfLists.push($scope.workboardstages);
    });
    }

单击编辑后，我在该特定文本框中显示阶段名称。但问题是它也显示相邻管道的相同。我想只显示当前管道。我正在使用ng-model显示它是占用所有管道。如何仅显示该特定管道的值？

Answer 1

因此，问题与索引有关。我明智地指出了$scope.newworkboard。

这是解决方案：（newworkboard基于管道索引并从editWorkboardStage函数传递索引。）

<input name="stageName" id="stageName" data-ng-model="newworkboard[$index].stageName" type="text">

AND

 <a href ="javascript:void(0)" data-ng-click="editWorkboardStage(workboard.stageId, $parent.$parent.$index)"><img src = 
"resources/zingy/images/Edit-Small.png" class="TableIcon"></a>

<强> HTML

<div data-ng-show="listOfLists.length > 0">
  <div data-ng-repeat="list in listOfLists"> 
    <div data-ng-repeat="pipeline in workboardstages track by $index">
      <div class="added-eachboard">
        <div class="form-group">
          <input name="pipelineName" id="pipelineName" data-ng-
          model="pipeline.pipelineName"  type="text">
        </div>
        <ul class="simpleDemo workboard-drags" data-ng-repeat="(key,
        workboardlist) in pipeline.workBoardStageMap">
        <li data-ng-if="pipeline.pipelineName == key" ng-repeat="workboard in
        workboardlist">{{workboard.stageName}} 
        <a href ="javascript:void(0)" data-ng-
        click="editWorkboardStage(workboard.stageId, $parent.$parent.$index)"><img src = 
        "resources/zingy/images/Edit-Small.png" class="TableIcon"></a> 
      </li>
    </ul>
    <div>
      <p class="weak">Stage Name:</p>
      <div class="form-group">
        <input name="stageName" id="stageName" data-ng-
        model="newworkboard[$index].stageName" type="text">
      </div>
    </div>
  </div>            
</div>
</div>
</div>

<强>控制器

在控制器中创建一个newworkboard数组并指定response.data索引。

$scope.newworkboard = [];
$scope.editWorkboardStage = function(stageId, index){
AccountService.editWorkboardStage(stageId).then(function(response){
    $scope.newworkboard[index] = response.data;
});

单击编辑后，ng-model将获取所有输入

1 个答案: