I have put an md-datepicker in an md-table md-cell. Because of something with my layout my datepicker content is not rendered correctly.
My controller logic:
app.controller("testCtrl", function(){
$scope.authPerson = {};
$scope.authPerson.dateStart = new Date();
$scope.authPerson.dateEnd = new Date();
});
My view:
<md-card>
<md-card-content>
<md-table-container>
<table md-table>
<tr md-row>
<td md-cell>
<md-datepicker ng-model="authPerson.dateStart"></md-datepicker>
</td>
</tr>
</table>
</md-table-container>
</md-card-content>
</md-card>
When I open the datepicker, the container is empty. Screenshot is attached.
Thank you in advance for your help.
Update #1
I have put the md-datepicker in body and it still doesn't work (works the same way).
<body ng-cloak layout="row" ng-controller="AppCtrl">
<md-datepicker ng-model="test" ng-disabled="false"></md-datepicker>
</body>
AppCtrl:
$scope.test = new Date();
I think this might be a dependency issue - Moment or something else.
Update #2
I have been able to create a plunkr replicating the problem.
https://plnkr.co/edit/4YBK4Eb8LVNeQbH5wIac
I notice that your ng-model is authperson.datestart , but your scope variable is authPerson.dateStart
I think it's case sensitive, so it is filling your model with empty data.
I found out that it is a bug reported in Angular Material Github https://github.com/angular/material/issues/10070
This bug occurs when using AngularJS 1.6.0 and Angular Material 1.1.0
Going to revert to AngularJS 1.5.9 until the fix.
Reverting from angular-material version 1.1.1 to version 1.1.0 solved it for me. I use angular version 1.6.1
Related
I am refraining to use jquery here so don't mark this as duplicate.
Here is the sample running Demo.
Please help me to get the selected row data.
Here is a solution.
You need to change html:
<kendo-grid options="mainGridOptions" k-on-change="onChange(dataItem)">
</div>
</kendo-tabstrip>
</div>
</kendo-grid>
And Javascript:
$scope.onChange = function(newrow){
console.log(newrow);
}
Here is also a working Dojo. Hope this helps you.
https://dojo.telerik.com/#sehaxx/uyiZazeW
Cheers,
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.
Good day dear colleagues. I have dataPicker in MaterialDesign on my page. In my page I want see just part of dataPicker it is calendar like this. Anybody knows how to implement it?
I want to see this:
Instead of this:
Here is a demo with bootstrap and angularjs with inline date picker:
http://plnkr.co/edit/7pnPeudbgTY3hd2SNATA?p=preview
The important part is to include in html:
script related to ui-bootstrap-tpls, in demo it is called angular-ui-bootstrap.js
to inject into your module, this bootstrap - in demo this is done by angular.module('plunker', ['ui.bootstrap']);
have the bootstrap css included
In html just add
:
<div style="display:inline-block; min-height:290px;">
<datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>
</div>
and in controller initialize dt model: $scope.dt = new Date();
In my Angular app, I want a certain div to appear if a variable is true, and to disappear if it is false.
However, it is not working. See my Fiddle
Can anyone help me understand why?
HTML
<div ng-controller="MyCtrl">
<div id="newProjectButton" class="project" ng-click="newProjectActive()" ng-if="!creatingNew">
<h1> + </h1>
<h3> New Project </h3>
</div>
<div id="newProjectActive" class="project" ng-if="creatingNew">
<form>
<input name="name" ng-model="newProjectName" type="text"></input>
<button ng-click="newProject()" type="submit" class='btn btn-primary'>Save</button>
</form>
</div>
</div>
JS
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.creatingNew = false;
$scope.newProjectActive = function () {
$scope.creatingNew = true;
}
$scope.newProject = function () {
alert($scope.newProjectName);
}
}
your angular version is 1.0.1. directive ng-if is not in this version of angular.
its introduce in angular 1.1.5
check this article
and
check it in angular under Directives topic change log
AngularJS first added the ngIf directive in 1.1.5
please update the angular version
here is the Demo
your controller should be like
myApp.controller("MyCtrl" , function($scope) {
because the global controllers are not supported by default in angular 1.3... check this one
First, when I looked at your fiddle, there was older version of your example there,
Second, which actually may be a reason, is in that example you were using angular in version 1.0.1, and i believe that version didn't implement ng-if. Updating to latest version will fix your problem
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>