Question

我的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>

addDynamically（）将数据动态添加到表

我的控制器是

 <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

提前进行攻击

Answer 1

此示例中的时间选择器并未完全绑定到任何输入。当你使用$（＆＃39; .bootstrap-timepicker＆＃39;）选择器调用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值。

希望有所帮助：）

Answer 2

在插件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);
                  });
            }
          });
        }
      };
    })

带有timepicker的angular无法向控制台日志显示值

2 个答案: