Question

有人可以解释为什么按下按钮时没有更新此插件中ng-model的输入？

http://plnkr.co/edit/8JpyUVM8dY8aoV4fi5hC?p=preview

HTML

  <body ng-controller="MainCtrl">
    Using ng-model:  <input type="text" ng-model="myDate"><br/>
    Using expression: {{ myDate  }}<br/>
    <button ng-click="nextDay()">Next Day</button>
  </body>

JS

app.controller('MainCtrl', function($scope) {
  $scope.myDate = new Date();
  $scope.nextDay = function(){
    $scope.myDate.setDate($scope.myDate.getDate() + 1);
  };
});

Answer 1

Working Plunker：http://plnkr.co/edit/ku8iy0YKvQfBdolg7cug?p=preview

将您的控制器更改为：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.myDate = new Date();
  $scope.nextDay = function(){
     var newDate = new Date($scope.myDate.setDate($scope.myDate.getDate() + 1));
     $scope.myDate = newDate;
  };
});

与其他提到的一样，对实例的引用没有改变，因此Angular不知道它需要再次渲染它。通过完全更改Date对象，您将强制Angular呈现已更改的模型。

Answer 2

不是使用setDate方法更新日期，而是使用本地创建的更新日期版本为$ scope.myDate对象设置新值。

$scope.myDate.setDate($scope.myDate.getDate() + 1);

变为

var newDate = new Date();
newDate.setDate($scope.myDate.getDate() + 1);
$scope.myDate = newDate;

Answer 3

由于input接受一个字符串，因此在myDate上隐含地调用了toString（）。这样做：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.myDate = new Date();
  $scope.myDateStr = $scope.myDate.toString();
  $scope.nextDay = function(){
    $scope.myDate.setDate($scope.myDate.getDate() + 1);
    $scope.myDateStr = $scope.myDate.toString();
  };
});

在您的HTML中：

<input type="text" ng-model="myDateStr">

Answer 4

所以会发生什么是angularjs维护你最初设置的日期对象的参考监视。使用setDate方法不会更改引用，因此angular不知道它已更改。

这就是原因：

var newDate = new Date();
newDate.setDate($scope.myDate.getDate() + 1);
$scope.myDate = newDate;

作品。

Answer 5

您可以找到here的真实答案。您无法将ng-model与<input/>一起使用。当然，您可以找到许多替代方案，例如与{{}}绑定。

@Marc实际上，ng-bind绑定元素的文本内容，而不是它的值。因此，它不能用于元素

Angular中的日期对象

5 个答案: