入门
在AngularJS应用中开始使用Input控件的步骤:
为AngularJS,Wijmo和Wijmo的AngularJS指令添加引用。
在应用模块中包括Wijmo 5指令:
var app = angular.module('app', ['wj']);
添加一个控制器来提供数据和逻辑。
向当前页面添加一个Input控件,并且将它与数据绑定。
(可选)添加一些CSS来自定义输入控件的外观。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/wijmo.css" />
<link href="css/app.css" rel="stylesheet" type="text/css" />
<script src="scripts/angular.js" type="text/javascript"></script>
<script src="scripts/wijmo.js" type="text/javascript"></script>
<script src="scripts/wijmo.input.js" type="text/javascript"></script>
<script src="scripts/wijmo.angular.js" type="text/javascript"></script>
<script src="scripts/app.js" type="text/javascript"></script>
</head>
<body ng-app="app" ng-controller="appCtrl">
<!-- this is the InputNumber directive -->
<wj-input-number
value="someValue"
format="n"
step=".5">
</wj-input-number>
</body>
</html>
// declare app module
var app = angular.module('app', ['wj']);
// app controller provides data
app.controller('appCtrl', function appCtrl($scope) {
// value to bind to
$scope.someValue = 3.5;
});
结果:
AutoComplete
AutoComplete控件是一个自动完成的控件,允许你过滤它的项目列表为你的类型,以及从它的下拉列表直接选择一个值。
要使用AutoComplete控件,你必须至少设置itemsSource 属性为一个填充列表的数据数组。
AutoComplete控件还提供了几个其它的属性来改变它的行为,比如cssMatch 属性。
这个cssMatch 属性允许你指定CSS类来突出符合你搜索条件的部分内容。
下面的示例使用了一个字符串数组通过设置itemsSource 属性来填充AutoComplete控件的项目列表。
要看到一个搜索建议列表,在下面的AutoComplete控件键入"ab" 或者"za" 。
<div>
<label>只设置itemsSource</label>
<wj-auto-complete items-source="countries">
</wj-auto-complete>
</div>
<div>
<label>设置itemsSource & cssMatch</label>
<wj-auto-complete
items-source="countries"
css-match="highlight">
</wj-auto-complete>
</div>
.highlight {
background-color: #ff0;
color: #000;
}
结果:
只设置itemsSource
设置itemsSource & cssMatch
ComboBox
ComboBox控件与AutoComplete控件是非常相似的,但它不是提供一列你输入内容的建议,而会自动补全并且选择一个你键入的选项。
就像AutoComplete控件,你必须至少设置itemsSource 属性为一个填充列表的数据数组。
你可能也会想要通过isEditable 属性来指定ComboBox是否可编辑。
isEditable 属性决定用户是否可以输入ComboBox列表中没有出现的值。
下面这个示例使用两个绑定同一个数据源的ComboBox,就像上面的AutoComplete控件那样。
第一个ComboBox的isEditable 属性设为false,而第二个的isEditable 属性设为真。
<div>
<label>不可编辑</label>
<wj-combo-box
items-source="countries"
is-editable="false">
</wj-combo-box>
</div>
<div>
<label>可编辑</label>
<wj-combo-box
items-source="countries"
is-editable="true">
</wj-combo-box>
</div>
InputDate和Calendar
InputDate控件允许你通过一个下拉日历编辑和选择日期,同时阻止你输入不正确的值。
InputDate的下拉日历可以作为一个独立的控件,并且可以在InputDate控件外独立使用。
InputDate和Calendar都指定了几个属性来改变控件的行为,最常用的属性包括:
value : 指定控件的日期值。
min : 指定能被输入到控件中的最小的日期值。
max : 指定能被输入到控件中的最大的日期值。
下面的示例展示了如何使用这些属性。
除了这些基本属性外,Calendar控件有一个formatItem 事件,你可以用它来自定义日历指定日期的显示外观。
下面这个示例使用了这个事件来自定义weekends和holiday的外观。
<div>
<label>带有min和max的InputDate</label>
<wj-input-date
value="today"
min="{{ minDate | date:'yyyy-MM-dd' }}"
max="{{ maxDate | date:'yyyy-MM-dd' }}">
</wj-input-date>
</div>
<div>
<label>带有min和max的Calendar</label>
<wj-calendar
style="width:300px;"
value="today"
min="{{ minDate | date:'yyyy-MM-dd' }}"
max="{{ maxDate | date:'yyyy-MM-dd' }}"
format-item="formatItem(s,e)">
</wj-calendar>
</div>
<p>
<b>所选日期: {{ today | date }}</b>
</p>
<p>
<b>有效范围: {{ minDate | date }} to {{ maxDate | date }}</b>
</p>
// apply special styles to weekends and holidays
var today = new Date();
$scope.today = today;
$scope.minDate = new Date(today.getFullYear(), 0, 1);
$scope.maxDate = new Date(today.getFullYear(), 11, 31);
// apply special styles to weekends and holidays
$scope.formatItem = function (s, e) {
var weekday = e.data.getDay(),
holiday = getHoliday(e.data);
wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6);
wijmo.toggleClass(e.item, 'date-holiday', holiday);
e.item.title = holiday;
}
// gets the holiday for a given date
function getHoliday(date) {
var day = date.getDate(),
month = date.getMonth() + 1;
switch (month + '/' + day) { // simple holidays (fixed dates)
case '1/1': return 'New Year\'s Day';
case '6/14': return 'Flag Day';
case '7/4': return 'Independence Day';
case '11/11': return 'Veteran\'s Day';
case '12/25': return 'Christmas Day';
}
var weekDay = date.getDay(),
weekNum = Math.floor((day - 1) / 7) + 1;
switch (month + '/' + weekNum + '/' + weekDay) {
case '1/3/1': return 'Martin Luther King\'s Birthday'; // third Monday in January
case '2/3/1': return 'Washington\'s Birthday'; // third Monday in February
case '5/3/6': return 'Armed Forces Day'; // third Saturday in May
case '9/1/1': return 'Labor Day'; // first Monday in September
case '10/2/1': return 'Columbus Day'; // second Monday in October
case '11/4/4': return 'Thanksgiving Day'; // fourth Thursday in November
}
return ''; // no holiday today
}
.wj-calendar .date-holiday {
/* holidays in calendar */
color: #008f22;
outline: 2px solid #008f22;
}
.wj-calendar .date-weekend:not(.wj-state-selected) {
/* weekends in calendar */
background-color: #d8ffa6;
}
结果:
带有min和max的InputDate
带有min和max的Calendar
所选日期: {{ today | date }}
有效范围: {{ minDate | date }} to {{ maxDate | date }}
与InputDate控件相同,InputTime控件允许你修改JavaScript日期的时间部分,InputTime控件和InputDate控件有许多共有的属性,
包括format , min , max 和value 。InputTime控件还提供了一个step 属性,
允许你在它的下拉表中指定相邻项目之间以分钟表示的差值。
InputDateTime控件结合了InputDate和InputTime控件,允许你同时设置JavaScript日期的日期和时间部分。
InputDateTime控件有两个下拉列表:一个用来选择日期,一个用来选择时间。
下面的示例说明了如何使用同时使用InputTime控件和InputDate控件。
注意这些控件共同编辑同一个JavaScript Date 对象并且只更新它们负责的一部分。
这个示例也展示了一个InputDateTime控件,它更新JavaScript Date 对象的时间和日期部分。
<div>
<label>带有min,max,format的InputDate</label>
<wj-input-date
value="today"
min="{{ minDate | date:'yyyy-MM-dd' }}"
max="{{ maxDate | date:'yyyy-MM-dd' }}"
format="MMM dd, yyyy">
</wj-input-date>
</div>
<div>
<label>带有min,max,step的InputTime</label>
<wj-input-time
value="today"
step="15"
min="09:00"
max="17:00">
</wj-input-time>
</div>
<p>
<b>所选日期和时间: {{ today | date: 'medium' }}</b>
</p>
<div>
<label>带有min,max,format,step的InputDateTime</label>
<wj-input-date-time
value="today"
format="MMM dd, yyyy hh:mm tt"
min="{{ minDate | date:'yyyy-MM-dd' }}"
max="{{ maxDate | date:'yyyy-MM-dd' }}"
time-step="15"
time-min="09:00"
time-max="17:00">
</wj-input-date-time>
</div>
var today = new Date();
$scope.today = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 13, 30);
$scope.minDate = new Date(today.getFullYear(), 0, 1);
$scope.maxDate = new Date(today.getFullYear(), 11, 31);
结果:
带有min,max,format的InputDate
带有min,max,step的InputTime
带有min,max,format,step的InputDateTime
所选日期和时间: {{ today | date: 'medium' }}
InputDate和校验
InputDate控件会自动分隔用户键入的使用format 属性指定格式的日期,无效的日期会被无视并且初始值会保留下来。
InputDate控件也会检查时间范围,确保时间值在使用min 和max 属性确定的时间范围内。
但是在大多数情况下,不是所有在min 和max 属性之间的日期都是有效的。
例如,你可能会创建一个日程安排应用,并希望用户不安排周末,假期或者已经有一定数量安排的日期。
要处理这些情况,InputDate(和Calendar)有个itemValidator 属性。
这个属性代表一个函数,该函数以日期为参数,如果日期是有效的返回true,否则返回false。无效的日期会被自动禁用,
这样用户就不会在日历中选择它们或者通过输入来输入它们了。
下面这个示例展示了一个含有itemValidator 函数的InputDate控件,当输入为周末或者美国法定假日时函数返回false。
这个示例也使用了itemFormatter 函数来增加一些指定的格式和一个含有假期名称的工具栏。
<div class="app-input-group">
<label>选择一个非节假日和周末的日期:</label>
<wj-input-date
value="theDate"
item-formatter="itemFormatter"
item-validator="itemValidator">
</wj-input-date>
</div>
<p>
<b>所选日期: {{ theDate | date }}</b>
</p>
$scope.itemFormatter = function (date, element) {
var weekday = date.getDay(),
holiday = getHoliday(date);
wijmo.toggleClass(element, 'date-weekend', weekday == 0 || weekday == 6);
wijmo.toggleClass(element, 'date-holiday', holiday);
element.title = holiday;
}
$scope.itemValidator = function (date, element) {
switch (date.getDay()) {
case 0:
case 6:
return false; // no appointments on weekends
}
if (getHoliday(date)) {
return false; // no appointments on holidays
}
return true; // not a weekend or a holiday, this date is OK
}
// gets the holiday for a given date
function getHoliday(date) {
var day = date.getDate(),
month = date.getMonth() + 1;
switch (month + '/' + day) { // simple holidays (fixed dates)
case '1/1': return 'New Year\'s Day';
case '6/14': return 'Flag Day';
case '7/4': return 'Independence Day';
case '11/11': return 'Veteran\'s Day';
case '12/25': return 'Christmas Day';
}
var weekDay = date.getDay(),
weekNum = Math.floor((day - 1) / 7) + 1;
switch (month + '/' + weekNum + '/' + weekDay) {
case '1/3/1': return 'Martin Luther King\'s Birthday'; // 3rd Mon/Jan
case '2/3/1': return 'Washington\'s Birthday'; // 3rd Mon/Feb
case '5/3/6': return 'Armed Forces Day'; // 3rd Sat/May
case '9/1/1': return 'Labor Day'; // 1st Mon/Sep
case '10/2/1': return 'Columbus Day'; // 2nd Mon/Oct
case '11/4/4': return 'Thanksgiving Day'; // 4th Thu/Nov
}
return ''; // no holiday today
}
.wj-calendar .date-holiday {
color: #008f22;
outline: 2px solid #008f22;
}
结果:
选择一个非节假日和周末的日期:
所选日期: {{ theDate | date }}
ListBox
ListBox控件展示了一列项目,允许你使用你的鼠标和键盘选中它们。
就像AutoComplete和ComboBox控件,你必须指定ListBox的itemsSource 属性才能使用它。
一个任意的项目内容可以使用wj-item-template 指令定义,
$item 和$itemIndex 变量代表一个数据项,它的参数可以分别地用在Angular绑定中。
下面的示例允许你在ListBox控件中选择一个项目同时展示控件的selectedIndex 和selectedValue 属性。
<wj-list-box
style="height:150px;width:250px;"
items-source="cities"
control="listBox">
</wj-list-box>
<p>
<b>所选索引: {{listBox.selectedIndex}}</b>
</p>
<p>
<b>所选值: {{listBox.selectedValue}}</b>
</p>
第二个示例演示如何使用模板来填充ListBox控件。它使用了一个项目模板来通过复杂布局的方式展示项目,包括图像。
<wj-list-box
style="max-height:300px;width:250px;"
items-source="musicians">
<wj-item-template>
{{$itemIndex + 1}}. <b>{{$item.name}}</b>
<div ng-if="$item.photo">
<img ng-src="{{$item.photo}}"
height="100" />
<br />
<a href="https://www.google.ru/#newwindow=1&q=The+Beatles+{{$item.name}}"
target="_blank"
style="color:red">go there!</a>
</div>
</wj-item-template>
</wj-list-box>
InputNumber控件允许你编辑数字,它会阻止你输入无效的数据并且在它被编辑的时候将数字格式化。
InputNumber可以在不指定它的任何属性情况下使用。不过,你通常会使用value 属性来将它绑定到一些数据。
除了value 属性,InputNumber控件提供了几个其他的属性可以被用来改变它的行为,比如:
min : 指定可以被输入数字的最小值。
max : 指定可以被输入数字的最大值。
step : 指定当微调按钮被单击时,当前值增加或减少的数量。
format : 指定用于显示正在编辑数字的格式。Format属性使用.NET样式的
数字格式字符串 。
下面的示例演示了如何使用所有这些属性。
<div>
<label>未绑定"n0"格式</label>
<wj-input-number
format="n0">
</wj-input-number>
</div>
<div>
<label>绑定"n"格式</label>
<wj-input-number
value="pi"
format="n">
</wj-input-number>
</div>
<div>
<label>绑定min (0), max (10), step和"c2"格式</label>
<wj-input-number
value="price"
format="c2"
step=".5"
min="0"
max="10">
</wj-input-number>
</div>
<div>
<label>未绑定占位符并且required="false"</label>
<wj-input-number
placeholder="Enter a number..."
required="false"
value="nullVal">
</wj-input-number>
</div>
$scope.pi = Math.PI;
$scope.price = 3.5;
$scope.nullVal = null;
结果:
未绑定"n0"格式
绑定"n"格式
绑定min (0), max (10), step和"c2"格式
未绑定占位符并且required="false"
InputMask控件让你在用户输入的时候可以对输入进行验证和格式化,防止无效数据。
InputMask控件可以在不指定任何属性的情况下使用。不过,你通常会设置它的value 和mask 属性。像其他Wijmo输入控件一样,
value 属性制定了InputMask控件的值。mask 属性制定了控件的输入掩码并且支持下列字符的的组合。
0
数字
9
数字或空格
#
数字,符号或空格
L
字母
l
字母或空格
A
字母数字
a
字母数字或空格
.
本地化的小数点
,
本地化的千分位分隔符
:
本地化的时间分隔符
/
本地化的日期分隔符
$
本地化的货币标志
<
使其后所有字符转换为小写
>
使其后所有字符转换为大写
|
Disables case conversion.
\
使其后的字符显示为原义字符
其它
原义字符
下面这个示例演示如何在InputMask, InputDate和InputTime控件使用value 和mask 属性。
<div>
<label>社会安全号码</label>
<wj-input-mask
mask="000-00-0000"
title="Mask: 000-00-0000">
</wj-input-mask>
</div>
<div>
<label>电话号码</label>
<wj-input-mask
mask="(999) 000-0000"
title="Mask: (999) 000-0000">
</wj-input-mask>
</div>
<div>
<label>试验你自己的掩码</label>
<wj-input-mask
value="customMask"
required="false"
placeholder="输入一个掩码...">
</wj-input-mask>
<wj-input-mask
mask="{{ customMask }}"
title="Mask: {{ customMask || 'N/A' }}"
required="false"
placeholder="试验你的输入掩码...">
</wj-input-mask>
</div>
<div>
<label>带有掩码的InputDate</label>
<wj-input-date
value="maskToday"
format="d"
mask="99/99/9999"
title="Mask: 99/99/9999">
</wj-input-date>
</div>
<div>
<label>带有掩码的InputTime</label>
<wj-input-time
value="maskToday"
format="t"
is-editable="true"
step="15"
mask="00:00 >LL"
title="Mask: 00:00 >LL">
</wj-input-time>
</div>
$scope.customMask = null;
$scope.maskToday = today;
结果:
社会安全号码
电话号码
试验你自己的掩码
带有掩码的InputDate
带有掩码的InputTime
菜单控件允许你创建一个简单的拥有可点击项目的下拉列表。就像ComboBox一样,Menu的项目可以通过itemsSource 属性直接定义。
要指定显示在Menu的文本,你可以设置header 属性。
Menu控件提供了两种方法来处理用户的选择,在每个菜单项目上指定一条指令或者指定一个itemClicked 事件。
与itemClicked 事件不同,指令是实现了以下两种方法的对象:
executeCommand(param) : 执行指令的方法
canExecuteComm