Javascript 动态放置输入，避免在不同元素上重复

我正在动态添加输入，但一旦我尝试在一个元素中添加一个输入，就会在另一个元素中添加相同的输入，这是由于ng重复：

    <div ng-repeat="operation in operations">

            <p>{{operation.hola}}</p>

            <button class="btn" ng-click="addNewChoice([])">Add fields</button>                 

            <div data-ng-repeat="choice in choices track by $index">
                <input type="text" ng-model="choice.text">                      
            </div>              

    </div>

当您单击添加字段按钮时，应该只在适当的框/表格中添加一个输入，而不是在两个框中都添加

---

我没有很好地解释我自己，但我这里有一个问题，您可以检查我的问题。

如果您希望每个操作的

选项不同，那么您需要创建两个不同的
选项
数组。最好的方法是在每个操作上创建一个
chioces
对象：

$scope.operations = [{
    hola: 'HELLO',
    choices: []
}, {
    hola: 'BYE',
    choices: []
}];

然后在HTML中：

<div ng-repeat="operation in operations">
    <p>{{operation.hola}}</p>

    <button class="btn" ng-click="operation.choices.push([])">Add fields</button>     

    <div data-ng-repeat="choice in operation.choices track by $index">
        <input type="text" ng-model="choice.text">                      
    </div> 
</div>


{{operation.hola}}

添加字段

编辑：如果出于某种原因不想修改操作数组，可以为以下选项创建二维不规则数组：

$scope.operationChoices = [];
for (var i = 0; i < operations.length; ++i) {
    $scope.operationChoices.push([]);
}

$scope.operationChoices=[]；
对于（变量i=0；i

那么您的HTML将是：

<div ng-repeat="operation in operations" ng-init="choices = operationChoices[$index]">
    <p>{{operation.hola}}</p>

    <button class="btn" ng-click="choices.push([])">Add fields</button>     

    <div data-ng-repeat="choice in choices track by $index">
        <input type="text" ng-model="choice.text">                      
    </div> 
</div>


{{operation.hola}}

添加字段
为什么不能修改json？它现在在你的程序中-你可以对它做任何事情

我是这样做的：

$scope.operations = [{hola: 'HELLO'}, {hola: 'BYE'}];

// this is JS - you have the power :)
// call this right after you get the json from your ajax call or something
$scope.operations = preProcessOperations($scope.operations);    


$scope.addNewChoice = function(choices) {
  choices.push(['']);
};

function preProcessOperations(ops){
  for(var i = 0; i < ops.length; i++){
    ops[i].choices = [];
  }
}

$scope.operations=[{hola:'HELLO'}，{hola:'BYE'}]；
//这是JS-你有权力：）
//在从ajax调用中获取json后立即调用此函数
$scope.operations=预处理操作（$scope.operations）；
$scope.addNewChoice=函数（选项）{
选择。推送（['']）；
};
功能预处理操作（ops）{
对于（变量i=0；i

Html:


{{operation.hola}}

添加字段
方法稍有不同，您也可以尝试一下

   <div ng-repeat="operation in operations">            
        <div class="panel">             
            <div class="panel-body">                
              <p>{{operation.hola}}</p>                 
            <button class="btn" ng-click="addNewChoice(operation)">Add fields</button>
            <div data-ng-repeat="choice in choices[operation.hola] track by $index">
                <input type="text" ng-model="choice.text">                      
            </div>
          </div>                
        </div>          
    </div>

您必须停止编辑该jsbin，以便其他人可以查看：）@sirrocco哈哈哈是的，对不起。我刚刚停止。将选择数组添加到操作数组对象。。。否则它将是一个普通数组，而不会work@sirrocco我无法修改我收到的json。我正在处理真实数据。添加了一个答案-为什么不能修改json？一旦它在客户端。。你可以对它做任何事情。不，我无法在这里添加选择：[

，我的朋友。你必须考虑到我正在接收一个我无法修改的json，所以这次添加空数组的技术不会起作用。@NietzscheProgrammer:为什么你不能在收到json后修改它？我的第一次ng重复从数据中的

操作开始。操作

，我还在挣扎。我不明白。。。

数据

来自哪里？我的第一次ng重复从数据中的

操作开始。操作

，我仍在尝试。我不完全确定你的意思。您是如何获取数据的？

<div ng-repeat="operation in operations">
    <p>{{operation.hola}}</p>

    <button class="btn" ng-click="addNewChoice(operation.choices)">Add fields</button>     

    <div data-ng-repeat="choice in operation.choices track by $index">
        <input type="text" ng-model="choice.text">                      
    </div> 
</div>

   <div ng-repeat="operation in operations">            
        <div class="panel">             
            <div class="panel-body">                
              <p>{{operation.hola}}</p>                 
            <button class="btn" ng-click="addNewChoice(operation)">Add fields</button>
            <div data-ng-repeat="choice in choices[operation.hola] track by $index">
                <input type="text" ng-model="choice.text">                      
            </div>
          </div>                
        </div>          
    </div>

angular.module('ionicApp',[])

.controller('mainCtrl', function($scope) {
    $scope.choices = {};
    $scope.operations = [{
            hola: 'HELLO'
        }, {
            hola: 'BYE'
        }];

    $scope.addNewChoice = function(operation) {
      $scope.choices[operation.hola] = $scope.choices[operation.hola] || [];
      $scope.choices[operation.hola].push(['']);
    };    
});