I have a problem with the model binding of my bootstrap datetimepicker, that doesn't update after selecting a date in the dialog.
When I directly edit the input field the binding gets triggered, but selecting doesn't update the binding.
I have a small
Plunker example
<body ng-controller="MainCtrl">
<p>Hello {{name}}! {{datum}}</p>
<div class="input-group">
<span class="input-group-addon add-on"><span class="fa fa-calendar"></span></span>
<input type="text" class="form-control datetimepicker" ng-model="datum"/>
</div>
</body>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.datum = new Date();
if($(".datetimepicker").length > 0){
$('.datetimepicker').datetimepicker({
format: 'YYYY-MM-DD HH:mm'
});
}
});
Plain bootstrap doesn't work with angular. You will need/should use a bootstrap-angular binding library instead of the bootstrap scripts. You still use the bootstrap css/sass/less etc. Angularstrap is one such library and it doesn't depend on jquery.
When you use angularstraps datepicker it will update your binding.
The (foul, hideous, messy) alternative is to bind an event handler to the bootstrap datepicker change event and from within there call $scope.digest() and/or trigger a changed event manually on the textfield element.
Related
I eventually need to create a select box with 4 options - Module 1 to 4. When an option is selected I need to send the number which was selected to the controller so that it can return different datasets for a chart.
That is the end goal, however experimenting with different code pens I simplified my problem down to just trying to get a variable from an input box.
I can get the value to appear on the template but I can not access it in the controller. How can I make the function in the controller work with the passed input data?
html
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<h1>Hello {{name}}</h1>
<p>Start editing and see your changes reflected here!</p>
</div>
<input placeholder="Module" type="text" ng-change="moduleChange(myModule)"
ng-model="myModule" ng-model-options="{debounce: 1000}">
{{myModule}}
</body>
script.js
angular.module('plunker', []).controller('MainCtrl',
function($scope) {
$scope.name = 'Plunker';
$scope.moduleChange = function(myModule) {
alert(myModule);
console.log(myModule);
$scope.name = myModule;
}
});
I thought that I would get an alert every time I changed the input but nothing is happening. nothing is logged to the console and the $scope.name variable appears to not change.
Where am I going wrong? Thx
Also any pointers for making it work inside a select box would be great too!
plunkr
Move ng-controller="MainCtrl" to the outer element (thats the reason why the function was not fired):
<body ng-app="plunker" ng-controller="MainCtrl" ng-cloak>
You don't need to pass the value into the function, you have the value with ng-model:
<input placeholder="Module" type="text" ng-change="moduleChange()" ng-model="myModule" ng-model-options="{debounce: 1000}">
$scope.moduleChange = function() {
alert($scope.myModule);
console.log($scope.myModule);
$scope.name = $scope.myModule;
}
I'm currently upgrading our app version of angular js from 1.0.8 to the latest stable release and running into an interesting issue.
We have a set of checkboxes used to filter information, in general the options are:
All
Filter 1
Filter 2
Filter N
The desire is to have the 'All' checkbox when clicked, remain checked. It will do additional logic to determine if the other checkboxes are checked and toggle their checked states off if they are. I was able to accomplish this with 1.0.8, but not with the latest version of angular.
At its most basic of setup, we just have a single checkbox, with a ng-model value set to some boolean scope variable and a ng-click defined to some function.
I have a plunker demo where one can toggle between 1.0.8 and 1.2.18 to illustrate the change, here: http://plnkr.co/edit/WaTj6e33x4SZ2NkKStsC?p=info
HTML:
<body ng-app='example' ng-controller="mainCtrl">
<h1>Hello Plunker!</h1>
<button type="button" ng-click="toggleCb(true)">All Checked</button>
<button type="button" ng-click="toggleCb(false)">All Unchecked</button>
<div>
<input type="checkbox" ng-model="allCheckbox" ng-click="toggleCb(true)" id="all"/>
<label for="all">All</label>
</div>
<div>Imagine more checkbox options</div>
<div>
<p>Value for checkbox is: {{ allCheckbox }}</p>
</div>
</body>
JS:
angular.module('example', [])
.controller('mainCtrl', function($scope) {
$scope.allCheckbox = true;
$scope.toggleCb = function(value) {
console.log('called with value', value);
$scope.allCheckbox = value;
}
});
So this basic example setup has a couple of buttons which when clicked will change the boolean value of the scope variable. That is to illustrate that setting the scope variable is being respected by the input. The input is click-bound as well to the same function and when using 1.0.8 it keeps the checkbox checked.
Has anyone had a need to do this with running the latest version of angular, and if so how have you overcome this issue?
I am trying to create a tooltip based from from this post
Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding
I successfully created the popup but I have trouble delivering the content to my popover.html
I added this to my script.js
var app = angular.module('myApp', ['ui.bootstrap', 'ian.bootstrap']);
app.controller('myCtrl', function ($scope) {
$scope.item = {
title: 'Original Title',
content:'content 1' //newly added item
};
$scope.text = 'Click me';
});
and I want to display it in my popover.html
<div class="popover-content">
{{item.content}}
</div>
It doesn't show anything. Can someone help me about it? thanks a lot!
my plunker
http://plnkr.co/edit/5pBZ9qq79OPl2tGEeYYV?p=preview
Here is your updated working Plunkr
Basically you have to pass the attr iantooltip-content with the binding of the content item, not the raw text, and after in the directive pass in the directive isolate scope options the binding of the content like :
iantooltipContent: '='
Just change the appenToBody variable and you're done.
You should read the docs for more infos about Angular directive :)
You can add the ng-controller in your div and then specify the controller name like so :
<div class="popover-content" ng-controller='myCtrl'>
{{item.content}}
</div>
Before the use cases, the basic syntax to create a custom directive.
For all the code samples in this page I started from the angular-seed template.
Starting from the angular-seed skeleton is quite easy to extract a model to begin to implement custom directives.
<html ngApp="myApp">
...
<div my-first-directive></div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/directives.js"></script>
...
</html>
I'm attempting to use Boostrap 3 tooltips with Angular JS so that the tooltip displays the value of an object in the Angular scope. This works fine when the page loads, but when the value of the object in the scope is updated the tooltip still displays the original value.
HTML:
<div ng-app>
<div ng-controller="TodoCtrl">
<span data-toggle="tooltip" data-placement="bottom" title="{{name}}">Hello {{name}}</span>
<button type="button" ng-click="changeName()">Change</button>
</div>
Javascript:
function TodoCtrl($scope) {
$scope.name = 'Ian';
$scope.changeName = function () {
$scope.name = 'Alan';
}
}
$(document).ready(function () {
$('span').tooltip();
});
There's an example demonstrating my code so far and the issue in this Fiddle
Instead of:
<span data-toggle="tooltip" data-placement="bottom" title="{{name}}">Hello {{name}}</span>
Use:
<span data-toggle="tooltip" data-placement="bottom" data-original-title="{{name}}">Hello {{name}}</span>
Bootstrap Tooltip first checks data-original-title, so as long as you keep this value updated, you'll be fine. Check out this working Fiddle
My guess is that it is missing an apply for changed values, so angular knows nothing about that and does not update. I recommend angular ui bootstrap instead of raw bootstrap components for this reason.
http://angular-ui.github.io/bootstrap/
This way there is no need for jquery which is a bonus in my book.
EDIT:
try this in change handler for a quick and dirty workaround:
$('span').tooltip('hide')
.attr('data-original-title', $scope.name)
.tooltip('fixTitle');
But as i said, check out angular version as this hack has several issues....
For Latest Angular Versions Use: [attr.data-original-title]="dynamicTooltipMsg"
<button
data-toggle="tooltip"
[data-title]="dynamicTooltipMsg"
[attr.data-original-title]="dynamicTooltipMsg">
Testing
</button>
I am trying to extend the functionality of ui bootstrap for the datepicker. I wanted to use a draggable directive that I have already made for other elements, so I can drag the days. (The final functionality will beassigning that date to certain tasks). What would be ideal for me is not to modify the ui bootstrap libraries. I have tried to insert the directive in the final html of the datepicker and then use the compile, but I can't make it work.
Can anybody help me? Thank you very much
If you want a more powerful datepicker you can use the Dan Grossman's DateRangePicker.
There is also a good implementation for angular that you can use.
https://www.npmjs.com/package/angular-daterangepicker
Simply inject the library in your angular module.
App = angular.module('app', ['daterangepicker']);
Then declare a model in your controller.
exampleApp.controller('TestCtrl', function () {
var vm = this;
vm.datePicker.date = {
startDate: null,
endDate: null
};
}
Finally use the directive in your views.
<div ng-controller="TestCtrl as ctrl">
<input date-range-picker class="form-control date-picker" type="text" ng-model="ctrl.datePicker.date" />
</div>