AngularJS ng repeat-jquery Datepicker在ng repeat内不工作
AngularJS ng-repeat - jquery Datepicker not working inside ng-repeat
jQuery日期选择器在AngularJS ng重复块内不工作。
不确定ng重复块内的代码生成是否有任何错误。同样的逻辑在ng repeat之外起作用。
工作代码
<div class="form-group">
<label class="control-label col-md-4">TEST DATE</label>
<div class="input-group col-md-2">
<input type="text" id="testDate" name="testDate" readonly="readonly" class="form-control">
</div>
</div>
不工作代码
<div ng-repeat="reportType in reportTypes">
<div class="form-group">
<label class="control-label col-md-4">{{reportType.reportTypeLabel}}</label>
<div class="input-group col-md-2">
<input type="text" id="{{reportType.reportTypeCodeId}}Date" readonly="readonly"
class="form-control">
</div>
</div>
</div>
Javascript
// Date picker dd/mm/yyyy
$(function() {
$("input[id*='date']").datepicker({
dateFormat : "dd/mm/yy"
});
});
$(function() {
$("input[id*='Date']").datepicker({
dateFormat : "dd/mm/yy"
});
});
在ng重复结束后使用此指令初始化日期选择器:
angular.module('mymodule').directive('ngOnFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit(attr.broadcastEventName ? attr.broadcastEventName : 'ngRepeatFinished');
});
}
}
};
});
在您的控制器中:
$scope.$on('ngRepeatFinished', function(){
$("input[id*='date']").datepicker({
dateFormat : "dd/mm/yy"
});
});
在您的视图中,将指令ng-on-finish-render
添加到具有ng-repeat
:的元素中
<div ng-repeat="reportType in reportTypes" ng-on-finish-render>
<div class="form-group">
<label class="control-label col-md-4">{{reportType.reportTypeLabel}}</label>
<div class="input-group col-md-2">
<input type="text" id="{{reportType.reportTypeCodeId}}Date" readonly="readonly"
class="form-control">
</div>
</div>
</div>
如果您的范围中有一个以上的ng重复,并且它们具有不同的目的,则可以添加broadcast-event-name="myNgRepeatFinished"
参数
$scope.$on('myNgRepeatFinished', function(){
$("input[id*='date']").datepicker({
dateFormat : "dd/mm/yy"
});
});
您必须为日期选择器创建一个自定义指令。
查看
<div ng-app="myApp" ng-controller="myController">
<div ng-repeat="report in repArray">
<div class="form-group">
<label>{{report.values.name}}</label>
<input type="text" datepicker ng-model="datevalue" />
</div>
</div>
指令
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function ($scope) {
$scope.report = [
{ 'name': 'rep1' },
{ 'name': 'rep2' },
{ 'name': 'rep3' }
]
$scope.repArray = Object.keys($scope.report)
.map(function (value, index) {
return { values: $scope.report[value] }
}
);
} ]);
myApp.directive("datepicker", function () {
function link(scope, element, attrs, controller) {
element.datepicker({
dateFormat: "dd/mm/yy"
});
}
return {
require: 'ngModel',
link: link
};
});
相关文章:
- AngularJS UI路由器不能像ng路由器那样工作
- ng隐藏和ng显示无法正常工作
- AngularJS ng开关或类似的动态值工作
- Cordova ng路线工作不正常
- 为什么ng控制器不调用或工作或功能不工作
- 无法使以下ng on click outside指令在同一页面上的两个元素上工作
- ng绑定html不工作
- 使用jqGrid列格式化程序函数使ng-click工作
- ng重复工作但没有表现出表情
- ng src工作不正常,但src工作正常
- ng消息包括不工作
- ng repeat在ng repeat-过滤器不工作
- ng init未按预期工作
- 角度方向ng显示不工作
- $localStorage array select with ng选项工作不正常
- ng show和ng hide don'I don’我一秒钟都不工作
- 将我的列表 vom ng-repeat 更改为收集重复 ng-click 后,无法正常工作
- ng-bind-html 工作,但抛出错误
- 在角度验证中禁用 ng 无法按预期工作
- 另一个 ng-click() 未按预期工作