javascript - Copy value of textboxes to another textboxes inside a dynamic form -
i have textboxes on upper part of ui , dynamic form below contains same name , should have same value. need have copy button on dynamic form , copy value input dynamic form below. using angularjs. how can possibly that?
my html form this:
<div class="form-group"> <label class="col-md-6 control-label">brand name: </label> <div class="col-md-6"> <input type="text" class="form-control" ng-required="true" name="bname" id="bname" class="form-control" ng-model="languageitem.bname" required/> </div> </div><br/><br/><br/> <div class="form-group"> <label class="col-md-6 control-label">product name: </label> <div class="col-md-6"> <input type="text" class="form-control" name="pname" ng-required="true" id="pname" ng-model="languageitem.pname" required/> </div> </div><br/><br/><br/> <div class="form-group"> <label class="col-md-6 control-label">product name sub: </label> <div class="col-md-6"> <input type="text" class="form-control" name="pnamesub" ng-required="true" id="pnamesub" ng-model="languageitem.pnamesub" required/> </div> </div><br/><br/><br/> i need copy input value of textboxes dynamic form below on button click
<div class="text-left"><h3>new languagessssss <button class="btn btn-primary pull-right" type="button" ng-click="removelanguageitem(languageitem)" value=""><span class="fa fa-minus"></span></button> <button class="btn btn-primary pull-right" type="button" ng-click="addlanguageitem()" value="" /><span class="fa fa-plus"></span></button></h3></div><br/> <legend> </legend> <div class="col-md-12" class="pull-right" > <button class="btn btn-primary pull-right" type="button" ng-click="copytext()" id="copytext" value="">copy</button> </div> <div id="web" ng-repeat="languageitem in languageformdata.language"> <div class="row col-xs-12"> <div class="col-xs-6"> <br/><br/> <div class="form-group"> <label class="col-md-6 control-label">brand name: </label> <div class="col-md-6"> <input type="text" class="form-control" ng-required="true" name="bname" id="bname" class="form-control" ng-model="languageitem.bname" required/> </div> </div><br/><br/><br/> <div class="form-group"> <label class="col-md-6 control-label">product name: </label> <div class="col-md-6"> <input type="text" class="form-control" name="pname" ng-required="true" id="pname" ng-model="languageitem.pname" required/> </div> </div><br/><br/><br/> <div class="form-group"> <label class="col-md-6 control-label">product name sub: </label> <div class="col-md-6"> <input type="text" class="form-control" name="pnamesub" ng-required="true" id="pnamesub" ng-model="languageitem.pnamesub" required/> </div> </div><br/><br/><br/> </div> <div class="col-xs-6"> <br/><br/> <div class="form-group"> <label class="col-md-6 control-label">featuressss: </label> <div class="col-md-6"> <!-- <input type="text" class="form-control" name="lfeature" ng-required="true" id="lfeature" ng-model="languageitem.lfeature" required/> --> <textarea rows="1" cols="25" class="form-control" style="border-color: #ff69b4; color:#ff1493; border-radius: 5px; height: 50px;" ng-model="pfeatureedit" name="lfeature" id="lfeature" ng-model="languageitem.lfeature" required></textarea> <textarea rows="1" cols="25" class="form-control" style="border-color: #ff69b4; color:#ff1493; border-radius: 5px; height: 50px;" ng-model="pfeatureedit" name="pfeatureedit" id="pfeatureedit"></textarea> </div> </div><br/><br/> <div class="form-group"> <label class="col-md-6 control-label">ingredient: </label> <div class="col-md-6"> <input type="text" class="form-control" name="lingredient" ng-required="true" id="lingredient" ng-model="languageitem.lingredient" required/> </div> </div><br/><br/> <div class="form-group"> <label class="col-md-6 control-label">instruction: </label> <div class="col-md-6"> <input type="text" class="form-control" name="linstruction" ng-required="true" id="linstruction" ng-model="languageitem.linstruction" required/> </div> </div><br/><br/> <div class="form-group"> <label class="col-md-6 control-label">language category: </label> <div class="input-group"> <div class="input-group-btn"> <select class="pull-right" type="text" name="languagecat" id="languagecat" ng-model="languageitem.languagecat"> <option value="">---please select---</option> <option ng-repeat="item in scplangcat" value="{{item.language_name}}">{{item.language_name}} - {{item.language_description}}</option> </select> </div> </div> </div><br/><br/> </div><br/><br/> </div> </div> have these kind of codes in controller file. dynamic form: //** dynamic funcion adding language form $scope.languageformdata = {}; $scope.languageformdata.language = [ { bname: null, pname: null, pnamesub: null, lfeature: null, lingredient: null, linstruction: null, languagecat: null } ]; $scope.addlanguageitem = function() { $scope.languageformdata.language.push({ bname: null, pname: null, pnamesub: null, lfeature: null, lingredient: null, linstruction: null, languagecat: null }); }; $scope.removelanguageitem = function(languageitem) { //console.log(subscriber); $scope.languageformdata.language.pop(languageitem); };
you should have button copy:
html
<div id="web" ng-repeat="languageitem in languageformdata.language"> <button class="btn btn-primary" ng-click="copyorigin(languageitem)">copy</button> ... rest of code... </div> you have button in each element. copy in element option copy origin.
js:
$scope.copyorigin = function (item) { item.bname = $scope.languageitem.bname; item.pname = $scope.languageitem.pname; item.pnamesub = $scope.languageitem.pnamesub; }; where item item_i in list of elements.
whit code, basically, value origin form , move item received parameter in function.
you can check plnkr: http://plnkr.co/edit/7ypp10ydsghf3qnwj01j?p=preview
in plnkr.
- version 1: code.
- version 2: code copy button.
extra tip:
- vars & functions should start lowercase , written in camelcase (even in
$scope
Comments
Post a Comment