In my project I need to add dynamic amount of datepickers to the page.
I tried to do it this way (Plunker):
Script:
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.openDatePicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: "yy",
startingDay: 1,
format: "shortDate"
};
$scope.details = [{
"parameterValue": "2015-08-12"
}, {
"parameterValue": "2015-08-12"
}, {
"parameterValue": "2015-08-12"
}, {
"parameterValue": "2015-08-12"
}];
});
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<form name="detailsForm" novalidate ng-submit="submitForm(detailsForm.$valid)">
<div ng-repeat="item in details" class="input-group">
<input ng-model="item.parameterValue" type="text" class="form-control" id="datePickerItem" datepicker-popup="shortDate"
is-open="opened" datepicker-options="dateOptions" current-text="Today" clear-text="Clear" close-text="Close" ng-readonly="false" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDatePicker($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</form>
</div>
</body>
</html>
The problem is that when I try to open one datepicker, all of them are opened (logically, as they share the same $scope.opened variable). Also when I close them and try to open them again, nothing happens.
Is there a elegant way to achieve this?
Thanks.
All of your datepickers have id="datePickerItem".
The id attribute must be unique in html. Try this instead:
id="datePickerItem_{{$index}}"
This will add the ng-repeat's current index to the id, so you can be relatively certain your id's are unique. This should also prevent all the datepickers from opening at the same time.
Also, you're using one and the same opened variable for all datepickers.
Try this instead:
<div ng-repeat="item in details" class="input-group">
<input ng-model="item.parameterValue" type="text" class="form-control"
id="datePickerItem_{{$index}}" datepicker-popup="shortDate"
is-open="opened[$index]" datepicker-options="dateOptions" current-text="Today"
clear-text="Clear" close-text="Close" ng-readonly="false" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDatePicker($event, $index)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
And:
$scope.opened = [];
$scope.openDatePicker = function($event, index) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened[index] = true;
};
Just make sure you set $scope.opened[index] to false, in case you close the datepicker.
try this:
$scope.open = function($event,opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
and in your html
ng-click="open($event, 'nameOfYourModel')"
why not bind opened on the repeat object?
like:
<div ng-repeat="item in details" class="input-group">
<input ng-model="item.parameterValue" type="text" class="form-control"
id="datePickerItem_{{$index}}" datepicker-popup="shortDate"
is-open="item['opened']" datepicker-options="dateOptions" current-text="Today"
clear-text="Clear" close-text="Close" ng-readonly="false" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDatePicker($event, item)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
and in controller:
$scope.openDatePicker = function($event, item) {
$event.preventDefault();
$event.stopPropagation();
if(item.opened){
item.opened = !item.opened;
} else{
item.opened = true;
}
};
Related
I have created a dynamic table that allows the user to add rows to the table. Now I want to create multiple tables that allow the user to add multiple rows.
The problem with my code is that the 'variable' choice is shared and making any changes to any of the fields in any of the tables causes all the table fields to replicate the behaviour. Can someone tell me how to create tables that are capable of holding different values?
Angular.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="createQuiz.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
<script src="quizMgmt.js"></script>
</head>
<body>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<form action="/createQuiz">
<ul class="list-group" data-ng-repeat="path in path">
<span>
<h1 ng-model="colNum" >Path {{colNum}}</h1>
<button class="btn btn-primary" ng-click="addNewPath()">Add New Path</button>
</span>
<li class="list-group-item" data-ng-repeat="choice in choices">
<span>
<span class="col-sm-2">
<select class="form-control" ng-model="choice.type" name="item" ng-options="item for item in selectOptions">
</select>
</span><br>
<span class="col-sm-9">
<input class="form-control" type="text" ng-model="choice.name" name="value" placeholder="Enter mobile number">
</span>
<button class="btn btn-danger" ng-click="removeChoice(choice.id)" ng-if="choice.id!=index">-</button>
<button class="btn btn-danger" ng-click="addNewChoice()" ng-if="choice.id===index">+</button>
</span>
</li>
</ul>
<br>
<button class="btn btn-primary" ng-click="addNewChoice()">Add fields</button>
<input type="submit">
</form>
<br>
<br>
<div id="choicesDisplay">
<!-- {{ choices }} -->
{{path}}
</div>
</div>
</body>
quizMgmt.js
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.selectOptions = ["Mobile",
"Office",
"Home"
];
$scope.choices = [{"id": 1,"type":"Mobile","name":""},
{"id": 2,"type":"Mobile","name":""}];
$scope.path =[{"NumPath":1, 'path':$scope.choices}];
$scope.colNum=1;
$scope.index = $scope.choices.length;
$scope.addNewChoice = function() {
var newItemNo = ++$scope.index;
$scope.choices.push({'id':newItemNo, "type":"Mobile","name":""});
};
$scope.addNewPath= function() {
var NumPath=$scope.path.length;
console.log($scope.path.length)
$scope.colNum=NumPath;
$scope.path.push({"NumPath": NumPath,'path':$scope.choices});
};
$scope.removeChoice = function(id) {
if($scope.choices.length<=1){
alert("input cannot be less than 1");
return;
}
var index = -1;
var comArr = eval( $scope.choices );
for( var i = 0; i < comArr.length; i++ ) {
if( comArr[i].id === id) {
index = i;
break;
}
}
if( index === -1 ) {
alert( "Something gone wrong" );
}
$scope.choices.splice( index, 1 );
};
});
Issue is with the $scope.choices which is common object , So it is getting replicated.
$scope.choices must be isolated and restrict it to that respective path like below.
I believe by default you need to two choices while adding new path. Hope this helps.
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.selectOptions = ["Mobile",
"Office",
"Home"
];
$scope.getDefaultChoices = function() {
return [{"id": 1,"type":"Mobile","name":""},
{"id": 2,"type":"Mobile","name":""}];
};
$scope.choices = $scope.getDefaultChoices();
$scope.paths = [{"NumPath":1, 'choices':$scope.choices}];
$scope.colNum=1;
$scope.index = $scope.choices.length;
$scope.addNewChoice = function(path) {
var newItemNo = ++$scope.index;
path.choices.push({'id':newItemNo, "type":"Mobile","name":""});
};
$scope.addNewPath= function() {
var NumPath=$scope.paths.length;
console.log($scope.paths.length)
$scope.colNum=NumPath;
$scope.paths.push({"NumPath": NumPath,'choices': $scope.getDefaultChoices() });
};
$scope.removeChoice = function(path, id) {
if(path.choices.length<=1){
alert("input cannot be less than 1");
return;
}
var index = -1;
var comArr = eval( path.choices );
for( var i = 0; i < comArr.length; i++ ) {
if( comArr[i].id === id) {
index = i;
break;
}
}
if( index === -1 ) {
alert( "Something gone wrong" );
}
path.choices.splice( index, 1 );
};
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
</head>
<body>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<form>
<ul class="list-group" data-ng-repeat="path in paths">
<span>
<h1 ng-model="colNum" >Path {{colNum}}</h1>
<button class="btn btn-primary" ng-click="addNewPath()">Add New Path</button>
</span>
<li class="list-group-item" data-ng-repeat="choice in path.choices">
<span>
<span class="col-sm-2">
<select class="form-control" ng-model="choice.type" name="item" ng-options="item for item in selectOptions">
</select>
</span><br>
<span class="col-sm-9">
<input class="form-control" type="text" ng-model="choice.name" name="value" placeholder="Enter mobile number">
</span>
<button class="btn btn-danger" ng-click="removeChoice(path, choice.id)" ng-if="choice.id!=index">-</button>
<button class="btn btn-danger" ng-click="addNewChoice(path)" ng-if="choice.id===index">+</button>
</span>
</li>
</ul>
<br>
<button class="btn btn-primary" ng-click="addNewChoice(path)">Add fields</button>
</form>
<br>
<br>
<div id="choicesDisplay">
<!-- {{ choices }} -->
{{path}}
</div>
</div>
</body>
The issue is with choices object. As you are using same instance in multiple objects so as new table created data get copied.
The solution of this is to create new instance of choices when new table gets created using angular.copy
NOTE: I didn't understand why you added "Add Fields" outside the list as it doesn't make any sense when you create new tables dynamically.
I have made few changes in the code kindly refer below.
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.selectOptions = ["Mobile",
"Office",
"Home"
];
$scope.choices = [{"id": 1,"type":"Mobile","name":""},
{"id": 2,"type":"Mobile","name":""}];
$scope.path = [{"NumPath":1, 'path':angular.copy($scope.choices)}];
$scope.colNum=1;
$scope.addNewChoice = function(path) {
var newItemNo = path.path.length;
path.path.push({'id':++newItemNo, "type":"Mobile","name":""});
};
$scope.addNewPath= function() {
var NumPath=$scope.path.length;
console.log($scope.path.length)
$scope.colNum=NumPath+1;
$scope.path.push({"NumPath": NumPath+1,'path':angular.copy($scope.choices)});
};
$scope.removeChoice = function(id, path) {
path.splice(id-1, 1);
// re-initialize choice id
angular.forEach(path, function(o, index){
o.id = index+1;
})
};
});
<html>
<head>
<link rel="stylesheet" type="text/css" href="createQuiz.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
<script src="quizMgmt.js"></script>
</head>
<body>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<ul class="list-group" data-ng-repeat="path in path">
<span>
<h1 ng-model="colNum" >Path {{colNum}}</h1>
<button class="btn btn-primary" ng-click="addNewPath()">Add New Path</button>
</span>
<li class="list-group-item" data-ng-repeat="choice in path.path">
<span>
<span class="col-sm-2">
<select class="form-control" ng-model="choice.type" name="item" ng-options="item for item in selectOptions">
</select>
</span><br>
<span class="col-sm-9">
<input class="form-control" type="text" ng-model="choice.name" name="value" placeholder="Enter mobile number">
</span>
<button class="btn btn-danger" ng-click="removeChoice(choice.id, path.path)" ng-if="choice.id!=path.path.length">-</button>
<button class="btn btn-danger" ng-click="addNewChoice(path)" ng-if="choice.id===path.path.length">+</button>
</span>
</li>
<br/>
<br/>
<button class="btn btn-primary" ng-click="addNewChoice(path)">Add fields</button>
</ul>
<br>
<br>
<br>
<div id="choicesDisplay">
<!-- {{ choices }} -->
{{path}}
</div>
</div>
</body>
Good day :)
I would like to disable key input and force the user to use the datepicker to add date to the input but I don't know how to do this.
In the current solution the user can select date but also type or erase the value directly in the input. I would like to disable the input, so the user can't type or erase anything, but still make the datepicker available.
Does angular ui-bootstrap already include this feature (checked the docs but didn't find any..) or do anyone have a solution for this?
This is a simpler version copy from the ui-bootstrap docs but its basically what I use in my site:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.dateOptions = {
formatYear: 'yy'
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.popup2 = {
opened: false
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerPopupDemoCtrl">
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</body>
</html>
Add a readonly attribute to the input and it will work as you expect :)
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.dateOptions = {
formatYear: 'yy'
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.popup2 = {
opened: false
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerPopupDemoCtrl">
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text"readonly class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</body>
</html>
Consider the following JS
angular.module('myApp')
.controller('HeaderCtrl', function($scope) {
$scope.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.searchBooking);
//$location.path('/bookings/' + $scope.searchBooking);
//delete($scope.searchBooking);
}
$scope.printValue = function() {
console.log($scope.searchBooking);
}
}
);
And the following HTML
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Testing" ng-model="searchBooking" ng-change="printValue()">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
My problem is that when the page loads, "test" is written in the text field, but when I change the field or press the button, nothing happens (console says "test" on every change or button click. Anyone know what I did wrong?
Try to wrap the value in an object. Objects are passed by reference, but simple values are passed as a copy of that value. It happened to me too several times.
Try this approach
$scope.myObject.searchBooking = "test"
So the full code will look like this
angular.module('myApp')
.controller('HeaderCtrl', function($scope) {
$scope.myObject.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.myObject.searchBooking);
//$location.path('/bookings/' + $scope.myObject.searchBooking);
//delete($scope.myObject.searchBooking);
}
$scope.printValue = function() {
console.log($scope.myObject.searchBooking);
}
}
);
and the html
<input type="text" class="form-control" placeholder="Testing" ng-model="myObject.searchBooking" ng-change="printValue()">
Find this fiddle which is having ng-model binding in ng-change.
HTML
<div ng-controller="MyCtrl">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Testing" ng-model="searchBooking" ng-change="printValue()">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
Angular controller
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.searchBooking);
//$location.path('/bookings/' + $scope.searchBooking);
//delete($scope.searchBooking);
}
$scope.printValue = function() {
console.log($scope.searchBooking);
}
}
I am trying to use angular's form validation from inside a templateUrl.
I have a directive that loads a templateUrl in which i have a form with inputs that get ng-required and ng-regex values from directive scope. Now, i tried to put in my directive's scope
form: '=', but when i access scope.form it is undefined.
I must specify that my submit button is outside of the form, and when clicked ng-click='save($index)' it must first check that the form is valid and then proceed with saving the edited data. scope.save() is defined in my directive.
this is from template:
<tr data-ng-repeat="row in source.data " data-ng-class="{'selected':row.$_selected}" >
<td data-ng-repeat="c in settings.columns" data-ng-click="toggleSelect(row)" >
<form name="editForm" id="editForm" novalidate>
<div ng-switch on="c.type" ng-show="editMode[$parent.$index]">
<span ng-switch-when="text" >
<input type="{{c.type}}" data-ng-model="row[c.name]" ng-required="{{c.isRequired}}" ng-pattern="{{c.regex}}"/>
</span>
<span ng-switch-when="select" >
<select data-ng-model="row[c.name]" ng-selected="row[c.name]" ng-init="row[c.name]" ng-options="item.value as item.name for item in c.items" ng-required="{{c.isRequired}}">
<!--<option data-ng-repeat="(value, name) in c.items" value="{{value}}">{{name}}</option>-->
</select>
</span>
<span ng-switch-when="textarea">
<textarea ng-model="row[c.name]" ng-required="{{c.isRequired}}" ng-pattern="{{c.regex}}">
</textarea>
</span>
<span ng-switch-when="checkbox">
<!--<label for="checkboxInput">{{c.name}}</label>-->
<input name="checkboxInput" type="checkbox" data-ng-model="row[c.name]" ng-true-value="{{c.true}}" ng-false-value="{{c.false}}"/>
</span>
<span ng-switch-default="">
{{row[c.name]}}
</span>
</div>
</form>
<span ng-hide='editMode[$parent.$index]'>{{row[c.name]}}</span>
</td>
<td>
<a href="{{row[settings.specialFields.url]}}" class="btn btn-default opacity75" data-ng-if="row[settings.specialFields.url]">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</td>
<td data-ng-if="row[settings.specialFields.isEditable]">
<button ng-click="edit(row)" ng-show="!editMode[$index]" class="btn btn-primary" >
edit {{$index}}
</button>
<button ng-click="save($index)" ng-disabled="" ng-show="editMode[$index]" class="btn btn-primary">
save
</button>
<button ng-click="cancel($index)" ng-show="editMode[$index]" class="btn btn-default">
cancel
</button>
</td>
</tr>
and this is from my directive:
scope: {
settings: '=',
source: '=',
form: '='
},
templateUrl: function (element, attr) {
return attr.templateUrl || 'src/grid.html';
},
link: function (scope, element, attrs) {
scope.editMode = [];
scope.editing = false;
scope.previousData = {};
scope.edit = function(field) {
scope.editing = scope.source.data.indexOf(field);
scope.editMode[scope.editing] = true;
scope.previousData = angular.copy(field);
};
scope.save = function(index){
console.log(scope.form);
scope.editMode[index] = false;
if (scope.editing !== false ) {
//do the saving
scope.editing = false;
}
};
scope.cancel = function(index){
scope.editMode[index] = false;
if (scope.editing !== false) {
scope.source.data[scope.editing] = scope.previousData;
scope.editing = false;
}
}
Here you go:
Working Form
Form button is outside of form, and could also be outside of directive. It doesn't matter with Angularjs.
There are two inputs, both have required and both have regex validation as you stated.
There is a directive with a templateURL
The important thing to remember here is that the form must have a name, and then it is referenced by that name as in: scope.myForm when
You don't have to name the input fields as I did in the plunker, but if you do, and they are ALL different values from one another, then you can do this: scope.myForm.myInputName.$valid to see if each input is valid if you wished.
But, the actual form will not be valid until ALL the inputs are valid, so you probably just need to call valid on the form itself as in in the provided example.
If you move the button outside of the directive, you will have to move the submit function from the directive to the controller (most likely).
Let me know if this helps, I can change things if needed. Also, try the plunker first with your question, then post what's going on with that new code; just fork the plunker and provide a link.
Here is the plunker code just in case...
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="angular.js#1.3.7" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script data-require="angular-ui-bootstrap#0.12.0" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<my-directive></my-directive>
</div>
</div>
</html>
<form name="myForm" novalidate>
<label>Input #1 (required)</label><br>
<input ng-model="form.data.myName" name='myName' ng-pattern="/\D+/" ng-required="true" /> <span ng-show="myForm.myName.$error.pattern">Takes anything but digits</span><br>
<br>
<label>Input #2 (required)</label><br>
<input ng-model="form.data.myEmail" name='myEmail' ng-pattern="/\d+/" ng-required="true" /> <span ng-show="myForm.myEmail.$error.pattern">Takes only digits</span>
</form>
<br>
<p># I'm a button that is outside of the form!</p>
<p ng-model="form.submitted">Form Submitted: <span class="blue">{{ form.submitted }}</span></p>
<p>Form Valid?: <span class="blue">{{ myForm.$valid }}</span></p>
<button ng-click="submitForm('myForm')">Submit Form</button>
<p ng-model="form.data">Here is the Form data:</p>
{{ form.data }}
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {});
app.directive("myDirective", function () {
return {
restrict: 'AE',
require: '?ngModel',
templateUrl: 'my-directive.html',
link: function (scope, elm, attrs, ctrl) {
scope.form = {submitted: false, data: {}};
scope.submitForm = function(formname){
console.log(scope[formname].myEmail)
console.log(scope.formname)
console.log(scope[formname].$valid)
scope.form.submitted = true;
}
} // end link
} // end return
});
I have a form where there is a need for me to have 2 or more date fields for different things. I tried the Angular UI Bootstrap which works fine when I have only 1 date field in the form. But it stops working if I have multiple date fields and I dont know the easier method to get this to work.
This is my HTML sample:
<label>First Date</label>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" name="dt" ng-model="formData.dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
<label>Second Date</label>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" name="dtSecond" ng-model="formData.dtSecond" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
My JS is:
myApp.controller('DatePickrCntrl', function ($scope) {
$scope.today = function() {
$scope.formData.dt = new Date();
};
$scope.today();
$scope.showWeeks = true;
$scope.toggleWeeks = function () {
$scope.showWeeks = ! $scope.showWeeks;
};
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = ( $scope.minDate ) ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
$scope.format = $scope.formats[0];
});
I implemented based on the sample here. The problem I have here is:
1) When one of the date field is clicked, the pop-up datepicker is messed up and seems to show 2 datepicker in 1.
2) When I remove is-open="opened" attribute, the pop-up window seems to work fine. But without is-open="opened", the ng-click="open($event) for the button doesnt work.
3) Since each of the date fields have different ng-models, I am unable to set default dates for any date fields except for the first one with ng-model="formData.dt"
The only long way to resolve this that I can think of is to separate the controller for each date field.
I would like to know how others implement multiple date fields in 1 form itself when using Angular UI Bootstrap.
I have 30 in one form one controller no problem. use the same concept if you need it on ng-repeat.
<label>First Date</label>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}"
name="dt" ng-model="formData.dt" is-open="datepickers.dt"
datepicker-options="dateOptions" ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event,'dt')">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
<label>Second Date</label>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}"
name="dtSecond" ng-model="formData.dtSecond"
is-open="datepickers.dtSecond" datepicker-options="dateOptions"
ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event,'dtSecond')">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
myApp.controller('DatePickrCntrl', function ($scope) {
$scope.datepickers = {
dt: false,
dtSecond: false
}
$scope.today = function() {
$scope.formData.dt = new Date();
// ***** Q1 *****
$scope.formData.dtSecond = new Date();
};
$scope.today();
$scope.showWeeks = true;
$scope.toggleWeeks = function () {
$scope.showWeeks = ! $scope.showWeeks;
};
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = ( $scope.minDate ) ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event, which) {
$event.preventDefault();
$event.stopPropagation();
$scope.datepickers[which]= true;
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
$scope.format = $scope.formats[0];
});
// ***** Q2 ***** somemodel can be just an array [1,2,3,4,5]
<div ng-repeat="o in somemodel">
<label>Date Label</label>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}"
name="dt{{o}}" ng-model="datepickers.data[o]"
is-open="datepickers.isopen[o]" datepicker-options="datepickers.option"
ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event,o)">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
myApp.controller('DatePickrCntrl', function ($scope) {
$scope.datepickers = {
data: {},
options: {
'year-format': "'yy'",
'starting-day': 1
},
isopen: {}
}
$http.get("get/data/for/some/model", function(result) {
$scope.somemodel = result;
for (var i = 0; i < result.length; i++) {
$scope.datepickers.isopen[result] = false;
$scope.datepickers.data[result] = new Date(); //set default date.
}
});
// fill in rest of the function
});
Simpler Solution. Requires only modding the HTML and can be used in a ng-repeat if you like. Just be creative with what you name the opened
Stick this in your Controller:
$scope.calendar = {
opened: {},
dateFormat: 'MM/dd/yyyy',
dateOptions: {},
open: function($event, which) {
$event.preventDefault();
$event.stopPropagation();
$scope.calendar.opened[which] = true;
}
};
HTML:
<div class="form-group row">
<div class="col-lg-6">
<label for="formDOB">Date of Birth</label>
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{calendar.dateFormat}}" ng-model="record.birthDate" is-open="calendar.opened.dob" datepicker-options="calendar.dateOptions" close-text="Close" placeholder="Date of Birth" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="calendar.open($event, 'dob')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-lg-6">
<label for="formWinDate">Win Date</label>
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{calendar.dateFormat}}" ng-model="record.winDate" is-open="calendar.opened.win" datepicker-options="calendar.dateOptions" close-text="Close" placeholder="Win DAte" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="calendar.open($event, 'win')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
wayne's answer is great. I would only add, that you can make the function 'open()' better:
$scope.open = function ($event, datePicker) {
$event.preventDefault();
$event.stopPropagation();
$scope.closeAll();
datePicker.opened = true;
};
And then you have to use it like that:
ng-click="open($event, dateFrom)"
Where dateFrom is your ng-model (i.e. you use $scope.dateFrom).
EDIT: $scope.closeAll(); is a function that closes all the datePickers. It can be written like that:
$scope.closeAll = function() {
$scope.dateFrom.opened = false;
$scope.dateTo.opened = false;
};
I'd prefer not to mix ng-model with UI info.For this purpose, is necessary to define an array to store the opening flags, as well as checking if the datePicker is opened or not.
Moreover, I have changes the 'open' behavior to 'toggle' instead, in order to allow closinf the datePicker with the button.
Here is my controller:
$scope.toggleOpenDatePicker = function($event,datePicker) {
$event.preventDefault();
$event.stopPropagation();
$scope[datePicker] = !$scope[datePicker];
};
Then it can be used as:
<input type="text" class="form-control" ng-model="model.date1" is-open="date1" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="toggleOpenDatePicker($event,'date1')"><i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
The $scope idea was borrowed from here:
I solved my problem by use this plunker with minor changes.
HTML
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="openDatePickers[0]" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 0)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="openDatePickers[1]" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 1)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
and in controller
$scope.openDatePickers = [];
$scope.open = function ($event, datePickerIndex) {
$event.preventDefault();
$event.stopPropagation();
if ($scope.openDatePickers[datePickerIndex] === true) {
$scope.openDatePickers.length = 0;
} else {
$scope.openDatePickers.length = 0;
$scope.openDatePickers[datePickerIndex] = true;
}
};
my changes
instead numbers (0 or 1) i use $index in angular ng-repeat.
like this:
is-open="openDatePickers[**$index**]"
ng-click="open($event, **$index**)"
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="openDatePickers[$index]" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close">
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, $index)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
i used it in a different way and it looks a bit easier to me. I was using one of the mentioned approaches, but i was to lazy to create tons of calendars since i was running i a loop without having any static identifier.
So this solution is just valid for you, if you want to create lots of calendars inside of a ng-repeat. Hope it helps!
That is the controller
$scope.datepickers = {
data: {},
isopen: {}
}
// setting the defaults once
for (var i = 0; i < $scope.array.length; i++) {
$scope.datepickers.isopen[i] = false;
$scope.datepickers.data[i] = new Date();
}
// aso..
$scope.valuationDatePickerOpen = function($event, index) {
if ($event) {
$event.preventDefault();
$event.stopPropagation();
}
$scope.datepickers.isopen[index] = true;
};
And this is the HTML snipped inside my loop
<!-- ng-repeat="entry in array track by $index" -->
<input type="text" class="form-control"
datepicker-popup="dd-MMMM-yyyy"
is-open="datepickers.isopen[$index]"
ng-click="valuationDatePickerOpen($event, $index)"
ng-model="entry.date" />