I am using a bootstrap calendar datepicker that operates and modifies an <input type="text"> element.
If I use ng-change="myAngularExpression()" it calls the function as soon as the text box is clicked. How can I have the function call after the input actually changes?
In my specific case, a user clicks in the text box that is displaying MM/DD/YYYY and a dropdown calendar comes down, then the angular expression executes, then the user changes the value and nothing happens until they click off the element and back on it.
I'm assuming you're using a jQuery-based Bootstrap datepicker. Unfortunately, mixing jQuery-based Bootstrap widgets with Angular rarely works out well.
The better alternative is to use UI Bootstrap, which is a collection of Bootstrap widgets written entirely in Angular. For example, here's a datepicker.
Once you're using Angular for your widgets (with UI Bootstrap), watching for changes to your date becomes as simple as $scope.$watch():
$scope.$watch('date', function() { /* ... */ });
Full example:
var app = angular.module('app', ['ui.bootstrap']);
app.controller('Main', function($scope) {
$scope.date = new Date();
// watch date for changes
$scope.$watch('date', function(newValue, oldValue) {
if (newValue !== oldValue)
{
$scope.message = 'Date changed from ' + oldValue + ' to ' + newValue;
}
});
});
<div ng-app="app">
<div ng-controller="Main">
<datepicker ng-model="date"></datepicker>
<div ng-bind="message"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
Someone may be able to provide an answer that allows the jQuery-based datepicker to work "good enough" with Angular, but that's a slippery road.
How about ng-keydown ? This way the input will change only when you press your key down on it.
<input ng-keydown='someAwesomeMethodHere()'/>
Related
I'm working with a form and would like to add ng-model on dynamic input elements. I have a scope variable defined as:
$scope.formData = {};
On the page there are a couple of drop-down lists that users can choose an option from and based on those options we are appending some input fields to form body.
formBody.append('<input ng-model="formData.'+obj.Title+'" type="number"></input></br>');
This is not working for me because I'm assuming once the controller runs it can't register any new ng-model. Is there way to add dynamic ng-model or there is a different approach to what I'm trying to do (i.e. build predefined views that can be loaded on the page)?
EDIT:
I have created a jsfiddle that outlines what I'm trying to do - http://jsfiddle.net/k5u64yk1/
If you need to dynamically add html with dynamic bindings that cannot be encapsulated into ng-repeat, ng-if, etc, you have to call $compile on the template once it has been modified to alert AngularJS that it has to reparse the template and initiate a new digest cycle. This will pick up any new ng-model bindings and appropriately tie them to your scope.
HTML:
<div ng-app="MyApp" ng-controller="MyCntrl">
<button ng-click="addInput()">Add Input</button>
<div id="form">
input would go here.
</div>
</div>
JS:
By placing your add input inside of a click event, you avoid an infinite compile loop. Note that this currently resets the state of your form, so if you wanted to work around that you'd need to capture your form state and restore it after compile.
$scope.addInput = function () {
var aForm = (angular.element(document.getElementById('form')));
if ($scope.data["Digital Conversation"][0].MetricType.Title === "Number") {
aForm.append(
'<input ng-model="formData.' +
$scope.data["Digital Conversation"][0].Title.Title +
'" type="number"></input>');
}
$compile(aForm)($scope);
}
You can find the working jsfiddle here: http://jsfiddle.net/k5u64yk1/
I have created custom directive drop down in angularjs and ionic-framework. In my dropdown items will open in modal popup which is working very good.
But I have kept search input box with clear button input box which is tide up with ng-model='search' and on button ng-click if I put ng-click="search=''" than it will work very good but if I put function and try to delete from directive module than it will not work
In template
<input type="search" ng-model="search" placeholder="select city...">
<button ng-show="search.length" ng-click="clearSearch()" class="customIcon button button-icon ion-close-circled input-button"></button>
In directive module
$scope.clearSearch = function() {
$scope.search = '';
}
then it will give me error
$scope.search is undefined
I am just very much confuse with $scope thing I also want to know how can i know scope any tool or something
I have also another issue that I kept two custom directive on the same and when first control change its value I want to clear the selection in second directive for that I am doing $watch also but I don't understand How can I do
My plunkr
http://plnkr.co/edit/GxM78QRwSjTrsX1SCxF7?p=preview
I have no experience with Ionic, but these types of issues are usually related to how prototypal inheritance works in JS and AngularJS.
A great explanation on prototypal inheritance in relation to Angular can be found here.
The issue can usually be solved by moving the property into an object:
$scope.viewModel = {};
$scope.clearSearch = function() {
$scope.viewModel.search = '';
};
And then use viewModel.search in your HTML where you need it:
<input type="search" ng-model="viewModel.search" placeholder="select city...">
Demo: http://plnkr.co/edit/4SLfA1CjRWB1XazIhj9d?p=info
I have the following Code that I would like to learn how to refactor out html and place into my Angular controller.
<a class="tab-item ">
<input type="datetime-local" name="schedule-date-time" id='schedule_input'
ng-model="scope.schedule"
ng-change="scope.updateSchedule(scope.schedule)"
class="icon ion-calendar schedule-picker"
ng-class='{highlighted:!scope.PublishingService.getPublishNow()}'
placeholder="yyyy-MM-ddTHH:mm" />
</a>
I would like to add some conditional logic, to trigger a warning modal before the datetime input is opened. In my attempts, when I attach a controller scope function to the above HTML ng-focus or ng-click, the datepicker input is opened first. This is not the functionality I desire. How can I create the datetime-local input dom using angular, and open it from my angularjs controller?
In my design, I would remove the input above, and bind the below function to the using ng-click. I would like that ng-click to warn the user, then call a subsequent function to create the input and open it. I have Something like this in mind:
$scope.DetermineIfIShouldWarnUser = function() {
if($scope.return_path == '/editpost'){
$scope.warnUser(' TRIGGER MODAL POPUP ', $scope.functionToOpenCalandarDOM);
}else{
$scope.functionToOpenCalandarDOM();
}
};
$scope.functionToOpenCalandarDOM() {
// HOW CAN I REFACTOR THE CALENDAR DOM OUT OF THE HTML and load it and open it from here?
}
I want to build a directive for showing datepicker textboxes, i.e regular textboxes which have JQuery UI's datepicker used on them, so when the user clicks them, a datepicker box opens to let them pick the date, etc.
I want to bind this directive somehow to a property on my scope. E.g if it were a normal textbox and I did ng-model='myDate' then $scope.myDate would be updated if the user typed in a new date. In the same way, I want to bind this field from the directive so when the user picks a date, it updates the scope property its bound to.
The problem is, I want to display the directive using something like this:
<datepicker name='something' value='2013-07-20' model='myProperty' />
And have the directive replace it with the <input type="text" /> etc. So I can't use ng-model.
How else can I bind the model property to the directive so that it updates whenever the user changes it?
See if this is what you want:
HTML
<div ng-app="app" ng-controller="Ctrl">
<foo model="property"></foo>
<input type="text" ng-model="property">
</div>
Javascript
angular.module('app', [])
.directive('foo', function() {
return {
restrict: 'E',
replace: true,
scope: { model: '=' },
template: '<input type="text" ng-model="model">'
};
})
.controller('Ctrl', function($scope) {
$scope.property = 'Foobar';
});
jsFiddle
In order to use ng-model instead of model, you'll need to wrap the input in a container tag. Here's another jsFiddle script that illustrates it.
Finally, there's a date picker control in Angular UI Bootstrap. Perhaps it already does what you need.
In my current project I am using the Bootstrap datepicker to allow users to select dates.
There has been a request to allow people to type the date into the datePicker input rather than having to manually click on the dates in the widget.
Currently when a user manually edits the date string, the date picker will highlight the correct day, but it will not update the variable it is assigned to. (As a note I am using Knockout.js and using an observable for storing the date)
My thoughts were that this would simply trigger the changeDate function but it does not.
Has anyone ever tried to achieve this and get it working?
Here is a working jsfiddle and a gist of the datePicker and dateValue bindings, which bind independently to an observable and update it accordingly.
<div class="input-append date">
<input type="text" data-bind="dateValue: date" />
<span class="add-on datepicker-button" data-bind="datePicker: { date: date }">
<i class="icon-calendar"></i>
</span>
</div>
The bindings are written with a BindingHandlerFactory wrapper that
1. creates a handler object for each element bound and stores it with $.data() on the element.
2. calls the handler's initialize(element, context) once.
3. call the handler's contextChanged(context) method every time the binding context changes.
Why would you not use not Read/Write options with KO.
something like
function yourModel(){
var self = this;
self.theDateUserManuallyWillEnter = ko.computed({
read: function () {
if (self.theDateUserManuallyWillEnter != undefined)
return self.theDateUserManuallyWillEnter ;
else
return $('#theDateUserManuallyWillEnteredTextBox').val(); //Jquery
identifier of text box
},
write: function (value) {
self.theDateUserManuallyWillEnter = value;
},
owner: this
});
}