angularjs - Angular-UI multiple datepickers insider form controller -


i creating form multiple angular-ui datepickers , input data. datepickers have created controller , parent form controller sample given below. form controller has model includes datepicker dates.

js:

var app = angular.module('app', ['ui.bootstrap']);  app.controller('datecntrl', function($scope,$timeout){     $scope.open = function() {         $timeout(function() {             $scope.opened = true;         });     }; });  app.controller('formcntrl', function($scope, $http){     $scope.model = {name:'', startdate:'', enddate:''}; }); 

html:

<form ng-controller="formcntrl">     <input type="text" id="name" placeholder="name" ng-model="model.name" />     <div ng-controller="datecntrl">         <input datepicker-popup="dd-mmmm-yyyy"  ng-model="model.startdate" id="startdate" type="text" />         <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>     </div>     <div ng-controller="datecntrl">         <input datepicker-popup="dd-mmmm-yyyy" ng-model="model.enddate" id="enddate" type="text" />         <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>     </div> </form> 
  • am going right way in having separate controller datepicker. act common controller date inputs
  • if yes, possible have generic way of binding data in datepicker controller model dates(model.startdate,model.enddate in case) in parent controller.
  • is there alternative way go this.

thanks , regards.

should have read more scope inheritance

the parent scope values can accessed using $parent

<form ng-controller="formcntrl">     <input type="text" id="name" placeholder="name" ng-model="model.name" />     <div ng-controller="datecntrl">         <input datepicker-popup="dd-mmmm-yyyy"  ng-model="$parent.model.startdate" id="startdate" type="text" />         <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>     </div>     <div ng-controller="datecntrl">         <input datepicker-popup="dd-mmmm-yyyy" ng-model="$parent.model.enddate" id="enddate" type="text" />         <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>     </div> </form> 

Comments

Popular posts from this blog

assembly - 8086 TASM: Illegal Indexing Mode -

Java, LWJGL, OpenGL 1.1, decoding BufferedImage to Bytebuffer and binding to OpenGL across classes -

javascript - addthis share facebook and google+ url -