我的HTML
<body ng-app="app" ng-controller="Ctrl">
<form name="form">
<table class="container table table-bordered" id="setpointtable">
<tr ng-repeat="row in rows" ng-repeat-end-watch>
<td style="text-align:center;">
<!-- row timefrom -->
<input type="text" class="bootstrap-timepicker" placeholder=" {{row.tfPlaceholder}}" style="text-align:center;" ng-model="row.time_from">
</td>
<td style="text-align:center;">
<!-- row timefrom -->
<input type="text" class="bootstrap-timepicker" placeholder="{{row.ttPlaceholder}}" style="text-align:center;" ng-model="row.time_to">
</td>
</table>
</form>
<button ng-click="submit()">submit</button>
<button ng-click="addDynamically()">Add Row</button>
添加动态（）动态添加数据到表
我的控制器是
<script>
var app = angular.module("app", []);
app.directive('ngRepeatEndWatch', function() {
return {
scope: {},
link: function(scope, element, attrs) {
console.log(scope, element, attrs);
if (scope.$parent.$last) {
$('.bootstrap-timepicker').timepicker();
}
}
};
});
app.controller('Ctrl', function($scope) {
$scope.rows = [];
$scope.table = []
$scope.final1_table = []
$scope.addDynamically = function() {
$scope.rows.push({
tfPlaceholder: "Time From",
ttPlaceholder: "Time to",
spfPlaceholder: "Time to",
sptPlaceholder: "Time to",
sp_from: "",
sp_to: "",
time_from: "",
time_to: ""
});
$scope.submit = function() {
var i = 0;
for (var i in $scope.rows) {
$scope.table.push({
time_from: $scope.rows[i].time_from,
time_to: $scope.rows[i].time_to,
sp_from: $scope.rows[i].sp_from,
sp_to: $scope.rows[i].sp_to,
})
}
console.log(JSON.stringify($scope.table));
}
};
$scope.deleteRows = function(index) {
$scope.rows.splice(index, 1);
};
})
当我点击提交时间时，picki应该显示给控制台，但它不是控制台上的空值当提交单击提交功能时我已经编写了console.log（JSON.stringify（$ scope.table））来显示数据
[plunker link] [1] [1]：http://plnkr.co/edit/gfAjRbTrC3e7TXaqSuXC?p=preview
在此先感谢
此示例中的时间选择器并不完全绑定到任何输入。当你使用$（'。bootstrap-timepicker'）选择器调用timepicker（）时，它会选择所有的时间选择器并在它们上面调用timepicker（）。
如果您执行以下操作，则可以检索时间更改：
<td style="text-align:center;">
<!-- row timefrom -->
<input id="{{ 'timepickerFrom' + $index}}" type="text" class="bootstrap-timepicker" placeholder="{{row.tfPlaceholder}}" style="text-align:center;" ng-model="row.time_from">
</td>
<td style="text-align:center;">
<!-- row timefrom -->
<input id="{{ 'timepickerTo' + $index }}" type="text" class="bootstrap-timepicker" placeholder="{{row.ttPlaceholder}}" style="text-align:center;" ng-model="row.time_to">
</td>
然后在你的链接功能，如：
if (scope.$parent.$last) {
scope.$parent.row.timepickerFrom = $('#timepickerFrom'+scope.$parent.$index).timepicker();
scope.$parent.row.timepickerTo = $('#timepickerTo'+scope.$parent.$index).timepicker();
}
您可以在提交功能中访问这些：
$scope.submit = function() {
var i = 0;
for (var i in $scope.rows) {
$scope.table.push({
time_from: $scope.rows[i].time_from,
time_to: $scope.rows[i].time_to,
sp_from: $scope.rows[i].sp_from,
sp_to: $scope.rows[i].sp_to,
})
console.log($scope.rows[i].timepickerFrom.data());
console.log($scope.rows[i].timepickerTo.data());
data（）返回的对象包含小时，分钟，秒和子午线字段，您可以从中以适当的格式构造time_to和time_from值。
希望有帮助:)
添加插件Timepicki的on_change属性
app.directive('timepicki', function() {
return {
require: 'ngModel',
link: function(scope, el, attr,ngModel) {
$(el).timepicki({
on_change: function(dateText) {
dateFormat: 'hh:mm a',
scope.$apply(function() {
ngModel.$setViewValue(dateText);
});
}
});
}
};
})