AngularJS - ng-change 仅在页面加载时触发一次答案

【问题标题】：AngularJS - ng-change only firing once when the page loadsAngularJS - ng-change 仅在页面加载时触发一次
【发布时间】：2018-03-28 15:50:09
【问题描述】：

我正在使用 Angular 1.5 编写应用程序。我有一个带有时间输入的表单。

           <div class="item item-input" ng-class="{ 'has-error' : accvm.addForm.time.$invalid }">
                <span class="input-label" ng-i18next="TIME"></span>
                <input name="time" type="time" max="{{ accvm.data.maxTime | date:'HH:mm' }}" ng-model="accvm.data.time" ng-change="accvm.timeChange()" style="text-align: right" required />
            </div>
            <div ng-messages="accvm.addForm.time.$error">
                <div class="form-error" ng-message="required"><span ng-i18next="VALIDATION_PROJECT"></span></div>
                 <div class="form-error" ng-message="max"><span ng-i18next="VALIDATION_TIME_FUTURE"></span></div>
            </div>

由于某种原因，ng-change 函数仅在页面加载时调用一次，即使我输入新值也不会再次调用。我不确定我做错了什么。

这是我的 JSFiddle：http://jsfiddle.net/aubz88/j25jwtL2/

【问题讨论】：

能否请您也提供控制器代码？
jsfiddle.net/aubz88/j25jwtL2 我需要它现在的最大值。

标签： angularjs forms validation

【解决方案1】：

ng-change 由于失效，不是触发方法。检查此工作代码

<!DOCTYPE html>
 <html lang="en">

<head>
<meta charset="UTF-8" />
<title>Example - example-date-input-directive-production</title>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
   </head>
   <body ng-app="dateInputExample">
    <script>

  angular.module('dateInputExample', [])
 .controller('DateController', ['$scope', function($scope) {
   $scope.changed = 0;
  $scope.example = {
    value: new Date(1999, 0, 1, 15, 30, 0)
  };



   $scope.change = function(){
     $scope.changed ++;
   }

 }])  
</script> 
<form name="myForm" ng-controller="DateController as dateCtrl">
  <label for="exampleInput">Picktime:</label> 
  <input type="time" time id="exampleInput" name="input" ng-model="example.value" placeholder="yyyy-MM-dd" required="" ng-change="change();" />
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
     Required!</span>
    <span class="error" ng-show="myForm.input.$error.time">
     Not a valid date!</span> 
  </div>
  <tt>value = {{example.value | date: "HH:mm"}}</tt>

  <br />
  <div>The time has been changed 
            <ng-pluralize count="changed" when="{'0': '{} times.',
                 'one': '1 time.',
                 'other': '{} times.'}"></ng-pluralize>
  </div>
</form>
<!--<form name="myForm" ng-controller="DateController as accvm">-->
<!--  <div class="item item-input" ng-class="{ 'has-error' : accvm.addForm.time.$invalid }">-->
<!--            <span class="input-label" ng-i18next="TIME"></span>-->
<!--            <input name="time" type="time"   ng-model="accvm.data.time" ng-change="accvm.timeChange()" style="text-align: right" required />-->
<!--        </div>-->
<!--        <div ng-messages="accvm.addForm.time.$error">-->
<!--            <div class="form-error" ng-message="required"><span ng-i18next="VALIDATION_PROJECT"></span></div>-->
<!--             <div class="form-error" ng-message="max"><span ng-i18next="VALIDATION_TIME_FUTURE"></span></div>-->
<!--        </div>-->
<!--        {{changed}} {{accvm.addForm.time.$invalid}}-->
<!--</form>-->

【讨论】：

但是当我更改值时，验证错误应该会消失。

【解决方案2】：

我认为问题在于您在控制器和模板中使用的缩写不同，将 accvm 更改为 vm 对我来说效果很好。

您的 JSFiddle 已更新：http://jsfiddle.net/j25jwtL2/58/

【讨论】：