如何在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 。

干杯