ng-model taking for all inputs after clicking edit

Question

I am using AngularJS. I am generating pipeline-like structure. At first onload I am having one default ng-repeat value. After clicking "add more" I am displaying another list. It goes on adding as long as I am clicking the "add" button.

Here is my HTML:

Add button

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

New pipeline will be created with Pipeline Names and one text box to add 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);
    });
    }

After clicking edit i am displaying stage name in that particular text box.But the problem is it is displaying same for neighbouring pipeline also.I want to display only for that current pipeline.As i am displaying using ng-model it is taking for all pipelines.How to display the value only for that particular pipeline?

Answer 1

So, the problem is related to indexing. I made $scope.newworkboard index wise.

This is the solution: (newworkboard is based on pipeline index and pass index from editWorkboardStage function.)

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

Controller

In the controller make an array of newworkboard and assign response.data index wise.

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