Question

我正在尝试将ngTimepicker与我的角度项目集成。它确实有效但我无法使用表单输入内联ngTimepicker输入。 check plunker here

我希望html的这一部分在一行中。

的index.html

<form>
  <input type="text " required="true" ng-model="ctrl.taskObj.condition">
  <ng-timepicker ng-model="ctrl.taskObj.timeStart" step="30" theme="green"></ng-timepicker>
  <ng-timepicker ng-model="ctrl.taskObj.timeEnd" step="30" theme="green"></ng-timepicker>
  <button type="button" class="btn btn-primary" ng-click="ctrl.addTask()">Add</button>
</form>

Answer 1

 <!DOCTYPE html>
 <html ng-app="app">
 <head>
<title>ngTimepicker</title>
  </head>
  <body ng-controller="Ctrl as ctrl">

<ng-timepicker ng-model="ctrl.time"></ng-timepicker>
{{ ctrl.time }}

<ng-timepicker ng-model="ctrl.time2" theme="red" show-meridian="true">    </ng-timepicker>
{{ ctrl.time2 }}

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
 <script type="text/javascript" src="src/js/ngTimepicker.min.js"></script>
 <script type="text/javascript">
 var app = angular.module('app', ['jkuri.timepicker']);
 app.controller('Ctrl', [function() { 

 }]);
 </script>
 </body>
 </html>

尝试这样的事情

Answer 2

试试这个：

CSS

ng-timepicker div {
    display: inline-block;
}

更新了plnkr

Answer 3

您需要将display inline-block设置为ng-timepicker指令。因为它取代了模板。

所以你需要写一个css like that;

ng-timepicker {
  display: inline-block;
}

Answer 4

以下是基于您的代码的工作示例：plunker

我基本上将css类更改为：

.inline {
    display: inline-block;
}

并将该类放在ngTimepicker指令中：

<form>
  <input class="inline"  type="text " required="true" ng-model="ctrl.taskObj.condition">
  <ng-timepicker class="inline" ng-model="ctrl.taskObj.timeStart" step="30" theme="green"></ng-timepicker>
  <ng-timepicker class="inline" ng-model="ctrl.taskObj.timeEnd" step="30" theme="green"></ng-timepicker>
  <button type="button" class="btn btn-primary" ng-click="ctrl.addTask()">Add</button>
</form>

显示内联不起作用

4 个答案: