I'm trying to create a directive for the datepicker, but the popup is not working (neither clicking in the textfield or the button)
Plunker: http://plnkr.co/edit/hUxQASblscbhFZFvWDyN
p.d: the idea is remove all datepicker code from the controller (cause the datepicker will be used in many controllers), so please don't suggest move the open and close function to the page controller.
I'm not sure this will get you all the way to your objective, but I think the hurdle you are facing is that you forgot to import ui.bootstrap when creating your 'foo' app.
http://plnkr.co/edit/ZGl0VuJjVF1nliMidaL6
Ensure you have the is-open attribute defined in the markup.
<input type="text" class="form-control" datepicker-popup="date.format" ng-model="date.selectedDate" max-date="date.maxDate" datepicker-options="date.dateOptions" date-disabled="date.disabled(date, mode)" ng-required="true" close-text="Close" show-weeks="false" is-open="date.opened" ng-focus="date.opened=true" />
Related
I would like to enable save button only when form validation returns no error. Everything works fine until I put date input field, and I have no idea what is bothering him.
This is an example of such field:
<div ng-class="{ 'fg-toggled': openCalendar.ppDateClosing == true }">
<input name="dateClosing"
ng-click="openDatePicker($event, 'ppDateClosing')"
ng-model="pp.dateClosing"
ng-readonly="true"
placeholder="{{pp.dateClosing}}"
is-open="openCalendar.ppDateClosing"
data-date-format="dd.MM.yyyy"
datepicker-popup="dd.MM.yyyy"
datepicker-options="dateOptions"
show-weeks="false"
type="text">
</div>
If I remove the datepicker-popup="dd.MM.yyyy" line, then validation works ok, but date-picker doesn't.
Did anybody have similar problem or has an idea how to solve this?
(I'm using angular boostrap)
I am using Angular bootstrap datepicker, only problem i have with translate, because I am using multilanguage application.
The problem I have is with button translate, i know i can easy translate CLOSE, and Reset button, but Today always stay the same, if I try somthing like this
<input type="text" class="form-control" value="22-22-2222"
uib-datepicker-popup="{{model.dateFormat}}"
ng-model="model.project.startDate"
is-open="model.startDateProjectPickerOpened"
close-text="Zatvori"
today-text="Danas"
clear-text="Obrisi"
alt-input-formats="altInputFormats"
name="projectStartDate"
required
ng-class="{'error':submitted && addNewProjectForm.projectStartDate.$invalid}" />
I got this
Only blue button didnt change value, even if i have tried today-text="Danas"
Use current-text insted of today-text
<input type="text" class="form-control" value="22-22-2222"
uib-datepicker-popup="{{model.dateFormat}}"
ng-model="model.project.startDate"
is-open="model.startDateProjectPickerOpened"
close-text="Zatvori"
current-text="Danas"
clear-text="Obrisi"
alt-input-formats="altInputFormats"
name="projectStartDate"
required
ng-class="{'error':submitted && addNewProjectForm.projectStartDate.$invalid}" />
I created a custom directive which is used to access the id of the form, to display messages if same validation failed.
directive Code
<div>
<md-input-container>
<label class="inputLabel" translate>amount</label>
<input ng-model="order.amount" name="amount" type="text" required
max="availableAmount"
ng-disabled="disabled" ng-currency flex/>
<ng-messages flex for="dataForm.amount.$error" ng-if="dataForm.amount.$dirty">
<ng-message when="max">max reached</ng-message>
</ng-messages>
</md-input-container>
</div>
usage:
<form id="dataForm">
<custom-directive></custom-directive>
</form>
It seems like I can not access the form. Or angularmessage can not handle the different scoping.
Has anyone the same problem or an idea?
Thank you
fyi.: I have found the following post, but I didn't think that i have the same problem as that guy.
angularjs ngMessages inside directive
I use Angular 1.4.8;message 1.4.8 and angular material 1.0.4
If directive have an isolated scope, than it will not be able to access the form controller object of the ng-form directive.
Angular enables multiple canonical forms, so you can simply wrap your input inside of your directive with a form / ng-form.
I have to style/replace all checkboxes and radio buttons with images.
I can do this easily by simply adding a span tag after every input(checkbox / radio) like.
<label for="rememberme">
<input type="checkbox" class="unique" id="rememberme"/>
<span class="icon-checkbox"></span>
</label>
How can i do this in angular js.
I cannot modify all htmls with adding a span element, as if something went wrong it will take time to revert.
But i have a unique class or i can add an attribute to write a directive.
I tried using an attribute but i am unable to inspect span element generated, it is working good if i use it as an element.
If i use as an attribute it is giving an output as
<input type="text" class="form-control" custom-input="">
<input type="text" class="form-control">
<span class="icon-checkbox">Checkbox icon</span>
</input>
is this Valid ?
Plunker here
I wouldn't worry about a custom directive just to replace the checkboxes with images. You could do this with CSS like this:
<!--HTML-->
<input type="text" class="form-control checkboxwithicon">
/*CSS*/
.checkboxwithicon{
position:relative;
}
.checkboxwithicon::after{
content:url('http://icons.iconarchive.com/icons/icojam/blueberry-basic/32/check-icon.png');
position:absolute;
top:-10px;
left:15px;
}
And position the image properly so that the checkbox is hidden.
You can write a directive that does generate the span icon-checkbox after the element (it's supposed to be a checkbox) for you and make it act like an attribute, then you can tag it in every input checkbox that you want. Even something wrong happens and you are not happy with the change, you don't have to waste your time and effort to revert the things back, just modify on the directive only.
I made it working from your suggestions with out any change to HTML for easy fallback
.directive('input',function(){
return{
require: '?ngModel',
restrict:'EAC',
link:function(scope,element,attr){
var html = angular.element("<span class='icon-checkbox'>Checkbox icon</span");
if( (angular.lowercase(element[0].tagName)==="input") && (angular.lowercase(attr.type)=== "checkbox"))
element.after(html)
}
}
})
Working Plunker
In file upload ng-change is not working as expected in angularJS
<input type="file" ng-model="fileUpload" ng-change="setFiles(this) /"
JS:
$scope.setFiles=function(element){
console.log(element.files);
}
Here element.files is undefined
But if i chage the ng-change to onchange it's working.
<input type="file" ng-model="fileUpload" onchange="angular.element(this).scope().setFiles(this)"/>
JS:
$scope.setFiles=function(element){
console.log(element.files);
}
Here i'm getting the element.files object.
Why it is working in onchange not in ng-change?
Angular doesn't seem to support binding for <input type="file"..../>. It seems like you have to create a directive... full details here. You can also try this library
<input type="file" id="file_upload_id_here" style="width:55%" name="file" onchange="angular.element(document.getElementById('file_upload_id_here')).scope().getFileDetailsCandidate(document.getElementById('file_upload_id_here'))" />
use like the above, some times the root scope is switchesm it cannot revert it current scope, on that this functionality will not works, so put your current document object like the above