CODEWITHSUNDEEP
angularjs
Nabil CHOUKRI
Nabil CHOUKRI

Reputation: 79

Edit Input name value

I'm adding form elements dynamically using AngularJS as you can see below and it works very fine.

But sometimes, the user need to change the value of the placeholder and replace it with a value with his choice and I don't see if it's possible or not ?

Here is my HTML

<div ng-app="angularjs-starter" ng-controller="MainCtrl">
   <fieldset data-ng-repeat="choice in choices">
   <div class="col-xs-3">
       <div class="input-group">
           <span class="input-group-addon">Tr.</span>
           <input id="tr-dpa" class="form-control" placeholder="Enter mobile number">

           <button class="remove"  ng-click="removeChoice()">-</button>
       </div>
   </div>
   </fieldset>

   <div class="form-group">
       <div class="col-xs-5 col-xs-offset-1">
         <button type="submit" class="add" ng-click="addNewChoice()">
         +
         </button>
       </div>
   </div>
</div>

And my script,

var app = angular.module('angularjs-starter', []);

  app.controller('MainCtrl', function($scope) {

  $scope.choices = [{id: 'choice1'}];

  $scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length+1;
    $scope.choices.push({'id':'choice'+newItemNo});
  };



  $scope.removeChoice = function() {
    var lastItem = $scope.choices.length-1;
    $scope.choices.splice(lastItem);
  };

});

jsfiddle

Upvotes: 0

Views: 62

Answers (1)

tanmay
tanmay

Reputation: 7911

You should have your choices array like this:

$scope.choices = [{
    id: 'choice1',
    placeholder: 'Enter Mobile Number'
  }];

And, inside ng-repeat,

<input id="tr-dpa" class="form-control" placeholder="{{choice.placeholder}}">

Now, when you add new input, ask for a placeholder and push it along with id.

$scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length + 1;
    $scope.choices.push({
      'id': 'choice' + newItemNo,
      placeholder: $scope.placeholder
    });
    $scope.placeholder = "sample placeholder"
  };

And, $scope.placeholder would be in HTML,

 <input type="text" value="sample placeholder" ng-model="placeholder">
 <button type="submit" class="add" ng-click="addNewChoice()">
   +
 </button>

working example

Upvotes: 2

Related Questions