如何在angularjs中的输入类型文本中调用任何函数？

Question

我给了2个用于时间选择的输入文本（FROM和TO）和一个提交按钮。 最初，我的按钮是禁用的，这意味着每当用户按时从FROM和TO进行编辑时，都会启用我的按钮。 我的函数名称是enable（）。下面是我的代码，其中仅显示了FROM到TO。 我需要在输入或md-input-container上调用enable（）。

  <md-content class=" pad-hori-27 margin-left66" ng-if="!contactDetails.isAllTime">
    <div>
      <md-input-container>
        <label>From Time</label>
        <input mdc-datetime-picker="" date="false" time="true" type="text" id="time2" placeholder="Time" min-date="minDate" format="HH:mm a" ng-model="contactDetails.timePeriod.fromTime" class=" md-input">
      </md-input-container>

      <md-input-container>
        <label>To Time</label>
        <input mdc-datetime-picker="" date="false" time="true" type="text" id="time2" placeholder="Time"  min-date="minDate" format="HH:mm a" ng-model="contactDetails.timePeriod.toTime" class=" md-input">
      </md-input-container>
    </div>
  </md-content>

Answer 1

您需要为此的ng-change属性

<input mdc-datetime-picker="" md-select="enable()" date="false" time="true" type="text" id="time2" placeholder="Time" min-date="minDate" format="HH:mm a" ng-model="contactDetails.timePeriod.fromTime" class=" md-input">

您可以像这样在集合上创建手表：

$scope.$watch('contactDetails.timePeriod.fromTime', function(newValues, oldValues){
  if(newValues != oldValues) {
    $scope.enable();
  }
});

Answer 2

您可以借助ng-change或ng-click指令调用函数

像

<input mdc-datetime-picker="" ng-change="enable()" date="false" time="true" type="text" id="time2" placeholder="Time" min-date="minDate" format="HH:mm a" ng-model="contactDetails.timePeriod.fromTime" class=" md-input">

但是您可以使用js表单验证https://docs.angularjs.org/guide/forms来代替启用按钮的调用功能

Answer 3

我不确定每次更改输入时都需要调用enable。 相反，请在按钮上使用ng-disabled ，提供一项功能来测试FROM和/或TO是否已填充。

如果您确实需要在更改时调用enable，请使用ng-change 。

编辑 （以详细说明解决方案）对于它的价值，这是我建议的。

 angular.module('changeExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.value = ''; $scope.disable = function() { return $scope.value === ''; }; }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="changeExample"> <div ng-controller="ExampleController"> <input type="value" ng-model="value" id="ng-change-example1" /> <button ng-disabled="disable()">Submit</button> <p> Value is "{{value}}" (activated: {{!disable()}}) </p> </div> </div> 

请注意，这是使用Angular的标准方法，而不是像建议的那样依赖$ watch 。

干杯