javascript - Directive for add new contact -
this custom directive,
var directiveprovider = angular.module('appdirective',[]); directiveprovider.directive('addnewcontact', function() { var custom_template = '<div id="" class="edit-box"><h4>contact</h4><div class="form-group">' + '<label class="col-sm-2 control-label" for="inputemail3">first name </label><div class="col-sm-4">' + '<input type="text" placeholder="enter ..." class="form-control"></div>' + '<label class="col-sm-2 control-label" for="inputemail3">last name</label><div class="col-sm-4">'+ '<input type="text" placeholder="enter ..." class="form-control"></div></div>' + '<div class="form-group"><label class="col-sm-2 control-label" for="inputemail3">email</label>' + '<div class="col-sm-4">' + '<input type="email" placeholder="enter email" id="exampleinputemail1" class="form-control"></div>' + '<label class="col-sm-2 control-label" for="inputemail3">telephone</label><div class="col-sm-4">' + '<input type="text" placeholder="enter ..." class="form-control"></div></div></div>'; return { restrict: 'ae', replace: true, template: custom_template, scope: { firstname: '=' }, link: function ($scope, elem, attr, ctrl) { console.debug($scope); } }; }); and in html have
<div id="addcontact" add-new-contact ></div> <div ng-click="addnewcontacthtml()"> <a>add new contact</a> </div> and in controller have
$scope.addnewcontacthtml = function(){ var compiledehtml = $compile("<div add-new-contact ></div>")($scope); $("#addcontact").append(compiledehtml); }; so on button click i, new empty template added , details can input. not sure, how create directive , how can access model in controller can save data controller.
you can use array, here angular part
var app = angular.module('appdirective',[]); app.directive('addnewcontact', function() { return { scope:{ obj:'=' }, templateurl: 'tempbody.html', link: function (scope, elem, attr, ctrl) { } }; }); app.controller('mycontroller',['$scope','$compile',function($scope,$compile){ $scope.details=[{fname:'',lname:'',mail:'',telephone:''}]; $scope.addnewcontacthtml = function(){ $scope.details.push({fname:'',lname:'',mail:'',telephone:''}); } }]); here html
<!doctype html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <script src="cc.js"></script> </head> <body ng-app="appdirective"> <div ng-controller="mycontroller"> <div id="addcontact"> <div add-new-contact="detail" ng-repeat="detail in details"></div> </div> <div ng-click="addnewcontacthtml()"> <a>add new contact</a> </div> </div> <script type="text/ng-template" id="tempbody.html"> <div class="edit-box"> <h4>contact</h4> <div class="form-group"> <label class="col-sm-2 control-label" for="inputemail3">fname</label> <div class="col-sm-4"> <input type="text" placeholder="enter ..." class="form-control" ng-modal="obj.fname"> </div> <label class="col-sm-2 control-label" for="inputemail3">lname</label> <div class="col-sm-4"> <input type="text" placeholder="enter ..." class="form-control" ng-modal="obj.lname"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="inputemail3" ng-modal="obj.mail">email</label> <div class="col-sm-4"> <input type="email" placeholder="enter email" id="exampleinputemail1" class="form-control"> </div> <label class="col-sm-2 control-label" for="inputemail3" ng-modal="obj.telephone">telephone</label> <div class="col-sm-4"> <input type="text" placeholder="enter ..." class="form-control"> </div> </div> </div> </script> </body> </html>
Comments
Post a Comment