javascript - Add buttons dynamically which also add textboxes dynamically AngularJS -

-

i have jsfiddle code :

http://jsfiddle.net/rnnb32rm/285/

<div ng-app="angularjs-starter" ng-controller="mainctrl">    <fieldset  data-ng-repeat="choice in choicesa">       <input type="text" ng-model="choice.name" name="" placeholder="enter name">          <button class="addfields" ng-click="addnewchoice()">add fields</button>       <button class="remove" ng-click="removechoice()">-</button>    </fieldset>      <div id="choicesdisplay">       {{ choicesa }} <br/>       {{ choicesb }}    </div> </div>

js :

var app = angular.module('angularjs-starter', []);    app.controller('mainctrl', function($scope) {    $scope.choicesa = [{id: 'choice1'}, {id: 'choice2'}];    $scope.choicesb = [];    $scope.addnewchoice = function() {     var newitemno = $scope.choicesa.length+1;     $scope.choicesa.push({'id':'choice'+newitemno});   };    $scope.removechoice = function() {     var lastitem = $scope.choicesa.length-1;     $scope.choicesa.splice(lastitem);   };  });

as can see, have function addnewchoice() adds objects array choicesa, , textboxes added based on objects number on choicesa array.

i need add textboxes first fieldset when click on add fields button on first fieldset, , data write on generated textboxes binded , added seperate objects choicesb array. , same other add fields buttons (so each add field button can add textboxes own fieldset tag), generated based on number of objects in choicesa array.

i tried everything, can't figure out. can explain more if it's bit unclear. thank ton in advance.

edit : thank great help, let me explain more :

i have spring rest api , 2 java objects (jpa entities) named resource & action, object resource contains list of actions, , action contains reference resource.

when load page, array of resource objects saved return database $http.get() method,named choicesa, structure of array :

[ {"idresource":1, "nameresource": "resname1"}, {"idresource":2, "nameresource": "resname2"} ......etc depends oh how rows got db ]

i have method, $http.post() posts array of action objects named choicesb seperate non nested array. array structure :

[ {"idaction":1, "nameaction":"nameaction1", "resource":     {"idresource":1, "nameresource": "resname1"}, {"idaction":2, "nameaction":"nameaction2", "resource":     {"idresource":2, "nameresource": "resname2"},    .. } {...}, {...} ... ]

so choicesa array contains resource objects got $http.get(), want fill action objects in choicesb array , save array using $http.post(), every action should contain resource object. if click add more actions in first fieldset tag example, means want fill first action object in choicesb array, , assign first resource object located in choicesa array etc..

i want able decide number of actions , fill them out, saving them choicesb array. every action related specific resource object described.

i hope it's clear now, i'm sorry & thank again.

maybe misunderstood question. maybe solve problem.

live example on jsfiddle.

var app = angular.module('angularjs-starter', []);    app.controller('mainctrl', function($scope) {      $scope.choicesa = [{      id: 'choice1',      choicesb:[]    }, {      id: 'choice2',      choicesb:[]    }];        $scope.addnewchoice = function() {      var newitemno = $scope.choicesa.length + 1;      $scope.choicesa.push({        'id': 'choice' + newitemno,        choicesb:[]      });    };      $scope.removechoice = function(ind) {      $scope.choicesa.splice(ind,1);    };      $scope.addnewchoiceb = function(choice) {      var newitemno = choice.choicesb.length + 1;      choice.choicesb.push({        'id': 'choice' + newitemno      });    };      $scope.removechoiceb = function(choice,ind) {      choice.choicesb.splice(ind,1);    };    });
fieldset {    background: #fcfcfc;    padding: 16px;    border: 1px solid #d5d5d5;  }    .addfields {    margin: 10px 0;  }    #choicesdisplay {    padding: 10px;    background: rgb(227, 250, 227);    border: 1px solid rgb(171, 239, 171);    color: rgb(9, 56, 9);  }    .remove {    background: #c76868;    color: #fff;    font-weight: bold;    font-size: 21px;    border: 0;    cursor: pointer;    display: inline-block;    padding: 4px 9px;    vertical-align: top;    line-height: 100%;  }    input[type="text"],  select {    padding: 5px;  }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="angularjs-starter" ng-controller="mainctrl">    <button class="addfields" ng-click="addnewchoice()">add choice</button>    <fieldset data-ng-repeat="choice in choicesa">      <input type="text" ng-model="choice.name" name="" placeholder="enter name">      <button class="remove" ng-click="removechoice($index)">-</button>      <button class="addfields" ng-click="addnewchoiceb(choice)">add fields</button>      <div data-ng-repeat="choiceb in choice.choicesb">        <input type="text" ng-model="choiceb.name" name="" placeholder="enter field">        <button class="remove" ng-click="removechoiceb(choice,$index)">-</button>      </div>    </fieldset>        <div id="choicesdisplay">      <pre>choicesa = {{ choicesa }}</pre>      <pre data-ng-repeat="choiceb in choicesa">choicesb = {{ choiceb.choicesb }}</pre>    </div>  </div>

updated

live example on jsfiddle.


Comments

Post a Comment

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

-
can configure following sample code ? when run following code, error : no entity framework provider found ado.net provider invariant name 'devart.data.sqlite' setting in machine.config <system.data> <dbproviderfactories> <add name="dotconnect sqlite" invariant="devart.data.sqlite" description="devart dotconnect sqlite" type="devart.data.sqlite.sqliteproviderfactory, devart.data.sqlite, version=4.6.287.0, culture=neutral, publickeytoken=09af7300eec23701" /> </dbproviderfactories> </system.data> after add below block code in app.config <?xml version="1.0"?> <configuration>   <configsections> <!-- more information on entity framework configuration, visit http://go.microsoft.com/fwlink/?linkid=237468 --> <section name="entityframework" type="system.data.entity.internal.configfile.entityframeworksection, entit...
Read more

java - Copying object fields -

-
what best way of copying classes when need have 2 independent variables? have simple class: public class myclass { boolean = false; string b= "not empty"; } do need make method : assign(myclass data ) { a= data.a; b= data.b; } is there automatic method copy (duplicate) objects in java? do need make method : pretty close. instead of making method, should make constructor. such constructors called copy constructor , , create them this: myclass(myclass data) { = data.a; b = data.b; } and create copy of instance, use constructor this: myclass obj1 = new myclass(); myclass obj2 = new myclass(obj1); copy constructor can tedious : using copy constructor create deep-copy can tedious, when class has mutable fields. in case, assignment create copy of reference, , not object itself. have create copy of fields (if want deep copy). can go recursive. a better way create deep copy serialize , deserialize object. why not use clone()? ...
Read more

c++ - Clear the memory after returning a vector in a function -

-
i have function processes , stores lot of data in , returns results vector of class. amount of data stored in function tremendous , want clear storage memory of function after finished job. necessary (does function automatically clear memory) or should clear memory function? update: vector<customers> process(char* const *filename, vector<int> id) { vector<customers> list_of_customers; (perform actions) return list_of_customers; } variables defined locally within function automatically released @ end of function scope. destructors objects called, should free memory allocated objects (if objects coded correctly). example of such object std::vector . anything you've allocated new must have corresponding delete release storage. try avoid doing own allocation , use raii instead, i.e. containers or smart pointers.
Read more