CODEWITHSUNDEEP
javascriptangularjs
Non
Non

Reputation: 8589

Putting inputs dynamically, avoid repeating on different elements

I am adding inputs dynamically, but once I try to add one input in an element, is adding the same input in a second hand element which is there due to a 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>

controller

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

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

When you click on Add Fields button, it should be adding only one input in the proper box/form, and not in both boxes.

I did not explain myself very well but here I have a JSBin so you can check my issue.

Upvotes: 2

Views: 77

Answers (3)

code-jaff
code-jaff

Reputation: 9330

Slight different way, you can try this too

   <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

Upvotes: 2

sirrocco
sirrocco

Reputation: 8055

Why can't you modify the json? It's in your program now - you can do whatever to it.

Here's how I'd do it:

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

Upvotes: 1

AJ Richardson
AJ Richardson

Reputation: 6820

If you want choices to be different for each operation, then you need to create 2 different choices arrays. The best way is to create a chioces object on each operation:

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

Then in your 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>

Edit: if you don't want to modify your operations array for some reason, you can create a 2-dimensional ragged array for the choices:

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

Then your HTML would be:

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

Upvotes: 1

Related Questions