[整理]通过AngularJS directive对bootstrap日期控件的的

最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形式即可使用了。

AngularJS 实例

实例
您可以在线编辑实例,然后点击按钮查看结果。
AngularJS 实例

<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

尝试一下 »


<!doctype html>  <html ng-app="datepickerApp">   <head>    <link type="text/css" rel="stylesheet"   />    <link type="text/css" rel="stylesheet"   />    <script src="jquery/jquery-1.11.1.min.js"></script>    <script src="angular.js"></script>    <script src="bootstrap/js/bootstrap.js"></script>    <script src="bootstrap-datepicker/js/bootstrap-datepicker.js"></script>   </head>   <body>     <input type="text"  >     <hr>    <div ng-controller="datepickerController">     <input type="text" bs-Datepicker ng-model="vm.selectedDate">     <button ng-click="vm.show($event)">Date SELECT</button>       <br>     vm.selectedDate: {{vm.selectedDate}}    </div>        <script type="text/javascript">     //bootstrap-datepicker     var datepicker1 = $('.datepicker').datepicker()      .on('changeDate',function (ev){       var newDate = new Date(ev.date)            datepicker1.hide()         alert(newDate)      })      .data('datepicker')         //angular     var app = angular.module('datepickerApp', [])          //angular-directive     app.directive('bsDatepicker',function(){      return {       restrict : 'EA',       scope:{              model:"=ngModel"           },       link : function(scope,element,attrs,ctrl){        var datepicker1 = $(element).datepicker()         .on('changeDate',function (ev){          var newDate = new Date(ev.date)               datepicker1.hide()            alert(newDate)         })         .data('datepicker')       }      }     })       app.controller('datepickerController',function ($scope){            var vm = $scope.vm = {       selectedDate : new Date(),       setDate : function(date){        selectedDate = date       },       clearDate : function(){        selectedDate =  null       },       show : function($event){               },       hide : function(){         }      }                       })      </script>    </body>  </html>  

AngularJS 基础

我的第一个 AngularJS 表达式
我的第一个 AngularJS 指令
我的第一个 AngularJS 指令(带有有效的 HTML5)
AngularJS 控制器
基础的 AngularJS 讲解


 

AngularJS 表达式

美洲杯赌球,简单的表达式
不使用 ng-app 的表达式
带有数字的表达式
使用带有数字的 ng-bind
带有字符串的表达式
使用带有字符串的 ng-bind
带有对象的表达式
使用带有对象的 ng-bind
带有数组的表达式
使用带有数组的 ng-bind
表达式讲解



AngularJS 指令

AngularJS 指令
ng-model 指令
ng-repeat 指令(带有数组)
ng-repeat 指令(带有对象)
指令讲解


AngularJS 控制器

AngularJS 控制器
控制器属性
控制器函数
JavaScript 文件中的控制器 I
JavaScript 文件中的控制器 II
控制器讲解


AngularJS 过滤器

表达式过滤器 uppercase
表达式过滤器 lowercase
货币过滤器表达式
指令过滤器 orderBy
输入过滤器
过滤器讲解


AngularJS XMLHttpRequest

读取静态 JSON 文件
XMLHttpRequest 解析


AngularJS 表格

显示一个表格 (简单)
带有 CSS 样式的表格
表格排序
使用 uppercase 过滤器的表格
使用序号的表格
使用 even 和 odd 表格
AngularJS - 从数据库中读取数据
从 MySQL 数据库中读取数据从 SQL Server 数据库中读取数据
AngularJS SQL 解析


本文由美洲杯赌球发布于计算机教程,转载请注明出处:[整理]通过AngularJS directive对bootstrap日期控件的的

TAG标签: 美洲杯赌球
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。