angularjs change appended text each name

Question

How to change appended text names separately from a single input field.. https://jsbin.com/lihamizuta/edit?html,js,output <-- click my jsbin here once.. i'm totally confused on this event, can anybody pls help me ..

var app = angular.module('myapp', ['ngSanitize']);

app.controller('AddCtrl', function ($scope, $compile) {

    $scope.field = {single: 'untitled'};
    $scope.addNew_SingleField = function (index) {
        var singlehtml = '<fieldset id="single_field" ng-click="selectSingle($index)">//click me once// <label ng-bind-html="field.single"></label>  <input type="text" placeholder="Enter name"><button ng-click="removeSingle($index)">-</button></fieldset>';
        var single = $compile(singlehtml)($scope);
        angular.element(document.getElementById('drop')).append(single);
    };
    $scope.removeSingle = function (index) {
        var myEl = angular.element(document.querySelector('#single_field'));
        myEl.remove();
    };
    $scope.selectSingle = function (index) {
        $scope.showSingle_Fieldsettings = true;
    };
});

<!DOCTYPE html>
<html ng-app="myapp">

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
 <script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>
</head>

<body ng-controller="AddCtrl">
 <button ng-click="addNew_SingleField($index)">Click me again</button>
 <div id="drop"></div>

 <form ng-show="showSingle_Fieldsettings">
  <div class="form-group">
   <label>Field Label name change here (?)</label>
   <br/>
   <input ng-model="field.single" class="fieldLabel">
  </div>
 </form>

</body>

</html>

if we click button multiple times fields will be shown below, if we click any where in fields the filed label option will be shown,,, i want to change 'Untitled' label name seperately from single shown field label input option.. pls help me — Vijju Sena, Jan 06 '16 at 12:01

score 1 · Accepted Answer · edited May 23 '17 at 12:31

You aren't following the Angular way of doing things - you are just appending elements jquery-style to the page instead of binding from a model object. This means everything is in 1 scope, so when you change the name for one row, all of the rows get updated.

You would better off creating an array in your scope, then bind that to display the rows using ng-repeat and update it in your edit box.

Note that when we add a new entry to the model we don't just add an empty string, we add an object with a name property ({name:''}). This is to handle the problem of passing simple types across scopes - see this answer for details.

var app = angular.module('myapp', ['ngSanitize']);

app.controller('AddCtrl', function($scope, $compile) {

  // out array of names - we manipulate his instead of the HTML
  $scope.names = [];
  // this will store the name we are currently editing
  $scope.currentEdit = null;

  $scope.field = {
    single: 'untitled'
  };

  // add an entry to the array instead of cerating an element
  $scope.addNew_SingleField = function(index) {
    $scope.names.push({name: ''});
  };

  // remove the array entry at the chosen index
  $scope.removeSingle = function(index) {
    $scope.names.splice(index, 1);
  };

  // set currentEdit to the name object we are editing
  $scope.selectSingle = function(value) {
    $scope.currentEdit = value;
  };
});

<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>
</head>

<body ng-controller="AddCtrl">
  <button ng-click="addNew_SingleField($index)">Click me again</button>
  <div id="drop">
    <!-- use ng-repeat to display the list of names -->
    <fieldset ng-repeat="n in names" id="single_field" ng-click="selectSingle(n)">//click me once//
      <label ng-bind-html="field.single"></label>
      <input type="text" ng-model="n.name" placeholder="Enter name">
      <button ng-click="removeSingle($index)">-</button>
    </fieldset>
  </div>

  <form ng-show="currentEdit">
    <div class="form-group">
      <label>Field Label name change here (?)</label>
      <br/>
      <input ng-model="currentEdit.name" class="fieldLabel">
    </div>
  </form>

</body>

</html>

Hi @Rhumbori.. you given mw great suggetion, thank you very much for your effort, but i already tried using ng-repeat, i got result, but i have lot of different type of fields to append to a single div,, have to append every type of field simultaneously ... if i use ng-repeat in append data,, the event was not working properly,, — Vijju Sena, Jan 06 '16 at 12:25
Can u pls help me doing this same event by changing appended values instead of using push or ng-repeat functionality ... — Vijju Sena, Jan 06 '16 at 12:26
I'm not sure what you mean exactly. Can you update your question to explain how these different field types work together? Do you mean you have, e.g. name and age, and you want to have a form to edit both fields at the bottom of the page? Or that they can click name and edit just name, or click age and edit just age? — Rhumborl, Jan 06 '16 at 12:30
yes exactly what you are thinking is correct.. i have a form in left side where i have to change names, age, email and etc,, in right side i have to append multiple name, age and email fields in a certain div,, i have to change those names from left side form settings seperately.. — Vijju Sena, Jan 06 '16 at 12:36

angularjs change appended text each name

1 Answers1