javascript - 值更改时 ng-model 不更新

Question

目前我有两个日期输入。我试图让第二个日期输入默认为第一个日期输入。然后用户可以将第二个日期输入更改为不同的值(保持第一个不变)。

当我更改我的第一个日期时，第二个日期输入更新正常，但是，ng-model 没有对 form_data.to_date 属性的值更改建模因此，这导致即使两个必填字段都已填写，表单仍然无效。

这是问题的一个例子:

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.form_data = {
      from_date: '',
      to_date: ''
    };
    
    $scope.f = function() {
      setTimeout(function() { // delay to show that to_date is not updating
        console.log($scope.form_data);
      }, 1000);
    }
  });

angular.element(document).ready(() => {angular.bootstrap(document, ['myApp']);});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller="myController">
  
  <form name="myForm">
    <input type="date" 
           ng-model="form_data.from_date"
           name="from_date"
           ng-change="f()"
           required />
           
    <input type="date" 
           ng-model="form_data.to_date" 
           name="to_date"
           ng-value="form_data.to_date || form_data.from_date | date: 'yyyy-MM-dd'"
           required />
           
    <p>Form invalid: {{myForm.$invalid}}</p> <!-- Should be false when first date is changed -->
  </form>
</div>

当第一个输入中的 value 发生变化时，如何在第二个日期输入中获取 ng-model 以对其变化进行建模？

Answer 1

这是因为您正在使用 ng-value="form_data.to_date || form_data.from_date | date: 'yyyy-MM-dd'" 即如果 form_data.to_date 存在然后分配它，如果不存在则分配 form_data.from_date 但它不会更新 ng-model 的值。

为此，您可以像这样修改代码:

    angular.module('myApp', [])
     .controller('myController', function ($scope) {
        $scope.form_data = {
          from_date: '',
          to_date: ''
        };
        $scope.f = function () {
          setTimeout(function () { // delay to show that to_date is not updating
            if ($scope.form_data.to_date == "") {
              $scope.form_data.to_date = $scope.form_data.from_date;
            }
            console.log($scope.form_data);
            $scope.$apply();
          })
        }
    });
    angular.element(document).ready(() => { angular.bootstrap(document, ['myApp']); });   

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller="myController">
    <form name="myForm">
        <input type="date" ng-model="form_data.from_date" name="from_date" ng-change="f()" required />
        <input type="date" ng-model="form_data.to_date" name="to_date"
            ng-value="form_data.from_date | date: 'yyyy-MM-dd'" required />
        <p>Form invalid: {{myForm.$invalid}}</p> <!-- Should be false when first date is changed -->
    </form>
</div>