ulq*_*rra 0 angularjs angular-ui
我想在点击按钮时打开一个日期选择器.这是我的观点:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="demo">
<input type="text" datepicker-popup="dd.MM.yyyy" ng-model="dt" is-open="opened" ng-required="true" />
<button style="height:34px;" class="btn btn-default" ng-click="open()">
<i class="icon-calendar"></i>
</button>
</div>
</body>
</html>
和我的控制器
var demo = angular.module('plunker', ['ui.bootstrap']);
demo.controller('demo', function($scope) {
$scope.dt = new Date();
$scope.open = function() {
$scope.opened = true;
};
});
可以在这里找到一个plunker:http://plnkr.co/edit/AzASfL2t5DdIx1ayDOS5?p=preview
我做错了什么？非常感谢你
您必须ng-click $event在open()方法中添加属性并执行$event.preventDefault()并$event.stopPropagation()打开ui-bootstrap的datepicker.
JAVASCRIPT
var demo = angular.module('plunker', ['ui.bootstrap']);
demo.controller('demo', function($scope) {
$scope.dt = new Date();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
});
HTML
<button style="height:34px;" class="btn btn-default" ng-click="open($event)">
<i class="icon-calendar"></i>
</button>
| 归档时间： |
|
| 查看次数： |
2738 次 |
| 最近记录： |