動態輸入輸入，避免重複在不同的元素上

Question

我正在動態添加輸入，但是一旦我嘗試在元素中添加一個輸入，就是在由於ng-repeat導致的第二手元素中添加相同的輸入：

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

控制器

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

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

當你點擊Add Fields按鈕，應該將只有一個輸入正確的箱/形式，而不是在這兩個盒子。

我沒有很好地解釋我自己，但在這裏我有一個JSBin所以你可以檢查我的問題。

Answer 1

爲什麼你不能修改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 = []; 
    } 
} 

HTML：

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

Answer 2

如果您希望choices對於每個操作都不相同，則需要創建2個不同的choices陣列。最好的辦法是建立在每個操作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> 

編輯：，如果你不希望修改操作陣列出於某種原因，您可以爲選擇創建一個2維數組襤褸：

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

那麼你的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> 

Answer 3

略有不同的方式，你可以試試這個太

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

JS

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(['']); 
    };  
}); 

DEMO