I have a slider range, and I would like the value to follow the slider without using jQuery, but only angularjs. I didn't see anything on Internet concerning this issue, is that impossible?
Thanks for answering.
Here is the code of my slider :
<input type="range" min="10" max="1000" ng-init="slider = 10" ng-model="slider" ng-change="adaptNumberSlider()">
Angular-slider: Slider directive implementation for AngularJS, without jQuery dependencies
http://prajwalkman.github.io/angular-slider/
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.
Is there anyway to get the value of the angular ui bootstrap typeahead selection before it changes the model?
Thanks alot!
Uri
There is no built in way to do this with with typeahead, but you can just store the old value in your ng-change
<input type="text" ng-model="foo" typeahead="bar in bars" ng-change="storeLast()">
$scope.storeLast() = function(){
//Before you reassign oldFoo, you can do some work with it here.
oldFoo=foo
}
However, this feels like a very strange thing to do. I think the better answer would be to redesign what you are trying to do so that you don't need weird code to do it.
I use angular and the bootstrap-switch plugin in my application. It works like this:
<input type="checkbox" name="my-checkbox" checked>
<script>$("[name='my-checkbox']").bootstrapSwitch("size", "small");</script>
The problem is that if I want to use all the attributes I found there it doesn't work.
How can I use ng-model with my switch?
I would like to use it like this:
<input type="checkbox" name="my-checkbox" checked="variableStatus" data-on-color="success" data-off-color="warning">
or
<input type="checkbox" name="my-checkbox" ng-model="variableStatus" data-on-color="success" data-off-color="warning">
The most obvious reason that it's not working is that bootstrap-switch is a jQuery library. Angular doesn't play well with jQuery, so if you want to use it, you'll have to write your own directive. However, the following link will give you a directive someone wrote called angular-bootstrap-switch. You might want to check it out.
https://github.com/frapontillo/angular-bootstrap-switch
Bootstrap has special method for starting, if you want start it, try it start after period time in angularjs.
setTimeout(installSwitcher, 1000);
function installSwitcher(){
$("[name='my-checkbox']").bootstrapSwitch();
}
<input type="checkbox" name="my-checkbox" checked>