单击编辑后，ng-model接受所有输入 [英] ng-model taking for all inputs after clicking edit

问题描述

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

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.

这是我的HTML:

添加按钮

    <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

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?

推荐答案

因此，该问题与索引编制有关.我明智地使 $ scope.newworkboard 成为索引.

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

这是解决方案:(newworkboard基于管道索引和 editWorkboardStage 函数的传递索引.)

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>

控制器

在控制器中制作一个 newworkboard 数组，并明智地分配 response.data 索引.

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;
});

这篇关于单击编辑后，ng-model接受所有输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！