I have an input that's working well with ui bootstrap:
<input type="text"
class="fromDate"
datepicker-popup="MM/dd/yyyy"
ng-model="custom_time_filter_begin"
ng-focus="showFromCalendar = true"
ng-click="showFromCalendar = true"
is-open="showFromCalendar"
show-button-bar="false"
datepicker-template-url="'blah.html'" <-----------------Doesn't work
datepicker-options="datePickerOptions"
ng-required="true"/>
And even this in my controller:
$scope.datePickerOptions =
templateUrl: 'something.html'
showWeeks: false
I'm looking through the docs: http://angular-ui.github.io/bootstrap/#/datepicker. It suggests I do those things, or even set datepickerTemplateUrl in the options or datepicker-template-url in the view, but nothing is changing. It's still using the default template.
I don't want to edit the source. I will however, copy the source into a new file and edit the HTML from there. I can't get it to point to the view file though.
P.S. I'm using coffeescript
Needed to update angular-bootstrap to latest version and then it started complaining. Fixed
Related
I'm using text-angular to save html-based content into database and i want to save checkboxes with the checked attribute on them. I've tried to use the input field like below but text-angular doesnt render checkboxes with checked attribute. Is there any way to do this without doing pure css checkboxes?
<input type="checkbox" checked>
EDIT: The code I am using:
<text-angular data-ng-model="example_content" placeholder="Content..."
rows="5">
And inside the textarea of the text-angular directive, I am trying to insert the input from above but it renders without checked attribute
I looked up in text-angular's sanitizer library textAngular-sanitize.js to find out that the checked attribute isn't part of their htmlAttrs attribute map.
Hence, the only option we're left with is to override the sanitizer JS file with the edit. Moreover, you can add other attributes/tags if you want (Do consider vulnerabilities though!)
Here's the working example plunker forked from official text-Angular plunker. Notice the ta-sanitize.js included in plunker which is modified version of their textAngular-sanitize.js
Hope this helps!
You can achieve by using ng-click
<input type='checkbox' ng-click='onsaveValue()' ng-model="saveValue">
i want to know if it is possible to integrate the existing Datepicker Directive from Cumulocity into my Cumulocity App.
Currently it is difficult to use a own datepicker directive because of the older angular version in use.
Best regards,
Meykel
The datepicker used is based on the datepicker popup available here. It is, however, an old version of it.
Here is a basic example of it's use:
<input ng-init="currentDate = new Date(); isPopupOpen = false"
ng-model="currentDate" datepicker-popup datepicker-append-to-body="false"
show-button-bar="false" show-weeks="false" is-open="isPopupOpen"
ng-click="isPopupOpen = !isPopupOpen">
The directive in question is called c8yDateTimePicker.
It is restricted to elements and attributes.
<div c8y-date-time-picker ng-model="ctrl.input.dateFrom"></div>
Here some images from the datepicker
Best regards,
Meykel
If you read following Angularjs validations, you understand that:
Message will appear if user interacted and did not fill the date manually.
The problem is when date is filled using the datepicker the input is not recognized by Angularjs and still consider $invalid true, so the message remains there which is confusing/problem although date is already filled using datepicker!
<div class="form-group" ng-class="{ 'has-error' : AddForm.Birthdate.$invalid && !AddForm.Birthdate.$pristine }">
<input type="text" required data-provide="datepicker" class="form-control" name="Birthdate" ng-model="Birthdate" />
<span ng-show="AddForm.Birthdate.$invalid && !AddForm.Birthdate.$pristine" class="help-block" >
Birthdate is required.
</span>
</div>
You can either validate it prior to form submit, or else hook a listener on your datepicker to manually set the model property Birthdate value.
It seems bootstrap datepicker is built on top of JQuery datepicker, manually setting the value would be a bad practice you can refer to:
Update Angular model after setting input value with jQuery
a better approach would be to use some built-in angular component such as the ones from:
https://angular-ui.github.io/bootstrap/
http://dalelotts.github.io/angular-bootstrap-datetimepicker/
https://github.com/dalelotts/angular-bootstrap-datetimepicker
I discovered a new way for this problem-
First of all create an id for that input box and then create a function say $scope.assign(), which simply assign the id value to the model of that input.
Something Like this-
$scope.assign = function() {
$scope.modelValue = $('#idName').val();
}
Now use ng-bind="assign()" to your input box.
It worked for me :)
Was facing the issue, and its because of the picker you are using is built on top of Jquery which remains undetectable by the scope on update.
For my new project I have added another library and its pretty awesome.
See the documentation http://dalelotts.github.io/angular-bootstrap-datetimepicker
Providing the piece of code for which I have added a wrapper directive
My Previous Answer was based on work around and because at that time of answer I was pretty new to the angular and now instead of that I will recommend, not to use an library which is built on top of Jquery in Angular project. Instead prefer angular libraries.
Coming on the topic-
For date time picker I found one very good library
https://github.com/indrimuska/angular-moment-picker
You can find more libraries in built in angular, but I found it pretty useful for other validations too like min-date, max-date validation.
Using this library will solve the issue of validation for sure and its pure Angular way.
Here is my code
<input
class="form-control"
ng-model="a.newTimes[$index]['time']._dateProxy"
ng-change="updateProviderComment(a)"
bs-timepicker
type="text">
a.newTimes[$index]['time']._dateProxy is a new Date() object
the point is: function updateProviderComment running only first time, when change time
bug? how to fix?
i have found a lot of problem with the angular strap modules, can i suggest you to use the angular-ui module for the timepicker? i have done something similar to your picker in my application with this module and everything is going ok. take a look here
#mautrok yes, i fully agree with you - angular-ui better (maybe only for now). But regarding design in project we have popover with html content and i can't implement this with angular-ui. I try redefine popover template and use ng-include inside, like this:
angular.module("template/popover/popover.html", []).run(["$templateCache", function($templateCache){
$templateCache.put("template/popover/popover.html", ""
+"<div class=\"popover popover-appointment {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">"
+"<div class=\"arrow\"></div>"
+"<div class=\"popover-inner\">"
+"<h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>"
+"<div class=\"popover-content\" ng-controller=\"AppointmentPopoverController\" ng-include src=\"content\"></div>"
+"</div>"
+"</div>"
+"");
}]);
it work, but when popover reopen javascript binding gone
I'm trying to use Angularjs's built in form validation, but when I add a required field to a checkbox to make sure its checked I get odd results. If I do the opposite of the value I'd like it seems to work fine. The following fiddle will explain it more thoroughly.
This fiddle works great when you're using Angularjs 1.0.4, but if you switch Angular to 1.2.1 it breaks all over the place. Is there a new way of doing this now? or would this be considered a bug?
EDIT
I simplified the code to make it make more sense, check out this fiddle. The key problem here is that it's doing the opposite of what I would like it to do, but if I switch it the entire thing falls apart. I've also replaced the older code I had here with the newer fiddle. You can still see the older fiddle code in the above link.
Here is the html:
<div ng-controller="myCtrl">
<ng-form name="myForm">
<input type="checkbox" ng-model="value.checkbox" name="group-one" ng-true-value="1" ng-false-value="0" ng-required="value.checkbox==1" />
<input type="submit" value="Send" ng-disabled="myForm.$invalid" />
{{choice}}
</ng-form>
</div>
Here is the controller:
function myCtrl($scope) {
$scope.value = {"checkbox":""};
}
This appears the be a bug, though I'm not sure it's the same as your original problem. The required directive is not functioning properly when an ng-true-value is specified.
Found an existing bug report.
If you use ng-click, you should pass $event in and then get the choice from $event. Or you can use ng-checked to get the value directly.
ng-click="updateQuestionValue($event)"
$scope.updateQuestionValue = function($event){
var choice = $event.target;
//...
}