Question

我无法使用Angular.js找到输入字段值。我在下面解释我的代码。

<div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">From Time :</span>
    <input type="text" name="time" id="time" class="form-control oditek-form" placeholder="E.G-9.00AM-10.00AM" ng-model="time" ng-keypress="clearField('time');" maxlength="30">
</div>
<div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">To Time :</span>
    <input type="text" name="time1" id="time1" class="form-control oditek-form" placeholder="E.G-9.00AM-10.00AM" ng-model="time1" ng-keypress="clearField('time1');" maxlength="30">
</div>

我在这里整合jquery-timepicker，下面给出了脚本。

$(function() {
    $('#time').timepicker();
    $('#time1').timepicker();
});

我的问题是，在我尝试使用一个ng-click事件尝试获取这些值时选择时间值后，它显示未定义。

$scope.addTimeDetails = function() {
    console.log('times', $scope.time, $scope.time1);
}

Answer 1

将AngularJS与jQuery库混合是一个糟糕的解决方案。接下来的问题是：您在输入上定义ng-model，然后初始化jQuery timepicker，这会产生问题。您应该为datepicker使用一些第三方angularjs库或构建您自己的指令。这个类似于jQuery timepicker：angular-jquery-timepicker

Answer 2

由于jquery-datepicker修改了DOM，因此无法正常工作。您可以尝试使用angular-datepicker或angular UI bootstrap

Answer 3

ngModels应始终拥有自己的对象，而不是范围属性：

<input type="text" ng-model="formModel.time">

在你的控制器中：

$scope.formModel = {};

然后您可以使用以下方式访问该值：

$scope.formModel.time;

Answer 4

jquery timepicker可能无法触发keypress事件。

使用ng-change

进行尝试

<input type="text" name="time" id="time" class="form-control oditek-form" placeholder="E.G-9.00AM-10.00AM" ng-model="time" ng-change="clearField('time');"  maxlength="30" >

Answer 5

在角度中使用第三方库时，建议的方法是创建如下指令：

angular.module('app', [ ])
    .directive('timePicker', [function () {
        return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            model: '=ngModel'
        },
        link: function ($scope, element, attrs, ngModelCtrl) {

            element.timepicker();

            element.on('changeTime', function () {
                $scope.$apply(function () {
                    $scope.model = element.val();
                });
            });       
        }
    }
}]);

并使用as：

<input type="text" ng-model="time" time-picker="" />
<input type="text" ng-model="time1" time-picker="" />

推荐资源：thinking-in-angularjs-if-i-have-a-jquery-background

Answer 6

<script>
$(function() {
    $('#time').timepicker({change: function(time) {
        // the input field
        $scope.time = time;
        if (!$scope.$$phase) $scope.$apply();
    }});
    $('#time1').timepicker({change: function(time) {
        // the input field
        $scope.time1 = time;
        if (!$scope.$$phase) $scope.$apply();
    }});
});
<script>

您需要将此代码放在角度js控制器中，以便在模型中设置值，而不是放入HTML。

无法使用Angular.js获取输入字段值

6 个答案: