md-datepicker初始位置

时间:2016-12-21 11:16:20

标签: angularjs datepicker angular-material

我遇到了md-datepicker的麻烦。

初始位置取决于页面中字段的位置。

我想为每个字段显示相同的位置。

这是一个例子: http://jsfiddle.net/pwf66foq/

尝试第一个和最后一个字段,您将看到问题。 对于第一个,12月是低于 对于最后一个字段,您看不到12月份

感谢您的帮助

代码:

<div ng-app="myApp">
<h2>Focus on each input and press 'enter' to see its name</h2>
<div ng-controller="MyCtrl">
    <input name="address" 
        ng-model="address" placeholder="Address"
        ng-keyup="checkName($event)">
    <md-datepicker name="birthday" 
        ng-model="birthday" md-placeholder="Birthday"
        ng-keyup="checkName($event)">
    </md-datepicker>
    <p>input name: {{ name }}</p>
    <input name="address" 
        ng-model="address" placeholder="Address"
        ng-keyup="checkName($event)">
    <md-datepicker name="birthday" 
        ng-model="birthday" md-placeholder="Birthday"
        ng-keyup="checkName($event)">
    </md-datepicker>
    <p>input name: {{ name }}</p>
    <input name="address" 
        ng-model="address" placeholder="Address"
        ng-keyup="checkName($event)">
    <md-datepicker name="birthday" 
        ng-model="birthday" md-placeholder="Birthday"
        ng-keyup="checkName($event)">
    </md-datepicker>
    <p>input name: {{ name }}</p>
    <input name="address" 
        ng-model="address" placeholder="Address"
        ng-keyup="checkName($event)">
    <md-datepicker name="birthday" 
        ng-model="birthday" md-placeholder="Birthday"
        ng-keyup="checkName($event)">
    </md-datepicker>
    <p>input name: {{ name }}</p>
    <input name="address" 
        ng-model="address" placeholder="Address"
        ng-keyup="checkName($event)">
    <md-datepicker name="birthday" 
        ng-model="birthday" md-placeholder="Birthday"
        ng-keyup="checkName($event)">
    </md-datepicker>
    <p>input name: {{ name }}</p>
    <input name="address" 
        ng-model="address" placeholder="Address"
        ng-keyup="checkName($event)">
    <md-datepicker name="birthday" 
        ng-model="birthday" md-placeholder="Birthday"
        ng-keyup="checkName($event)">
    </md-datepicker>
    <p>input name: {{ name }}</p>
    <input name="address" 
        ng-model="address" placeholder="Address"
        ng-keyup="checkName($event)">
    <md-datepicker name="birthday" 
        ng-model="birthday" md-placeholder="Birthday"
        ng-keyup="checkName($event)">
    </md-datepicker>
    <p>input name: {{ name }}</p>
    <input name="address" 
        ng-model="address" placeholder="Address"
        ng-keyup="checkName($event)">
    <md-datepicker name="birthday" 
        ng-model="birthday" md-placeholder="Birthday"
        ng-keyup="checkName($event)">
    </md-datepicker>
    <p>input name: {{ name }}</p>
</div>

var app = angular.module('myApp', ['ngMaterial']);

app.controller('MyCtrl', ['$scope', function MyCtrl ($scope) {

$scope.name = '';

$scope.checkName = function ($event) {
    console.log($event.target.name);
    $scope.name = $event.target.name;
};
}]);

0 个答案:

没有答案