1. Add three control to the UI: StartTime EndTime Weekdays:
2015-11-17 20:26:40
data-model: Html5在html里的体现
k-checklist-model: kendoUI
ng-click/ng-value/ng-checked: Angular在html里的体现
<div class="pn-module-funcname-new-field">
<div>Start Time</div>
<input class="ds-import-conn-new-value" kendo-time-picker k-ng-model="selectedStartTime" k-options="startTimeOptions" />
</div>
<div class="pn-module-funcname-new-field">
<div>End Time</div>
<input class="ds-import-conn-new-value" kendo-time-picker k-ng-model="selectedEndTime" k-options="endTimeOptions" />
</div>
<div class="pn-module-funcname-new-field">
<div>Days Of Week to Run</div>
<br />
<div class="pn-module-funcname-new-checkbox">
<div ng-repeat="item in checkBoxWeekdays">
<input type="checkbox" ng-checked="selectedWeekdays.indexOf(item) > -1" ng-value="{{item}}" ng-click="check(item, $event)"> {{item}}
</div>
</div>
</div>
js:
$scope.checkBoxWeekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
$scope.check = function (value, e) {
var idx = $scope.selectedWeekdays.indexOf(value);
if (idx >= 0 && !e.target.checked) {
$scope.selectedWeekdays.splice(idx, 1);
}
if (idx < 0 && e.target.checked) {
$scope.selectedWeekdays.push(value);
}
};