Question

我试图像我的问题一样尽可能地提高......

情境： 我的html页面中有三个输入字段，其中两个是接受用户输入的值，第三个是绑定（添加）这两个值。

到目前为止完成： 我最初使用<input value="{{value1+value2}}" id="value3"/>将值作为字符串;通过将字符串减去0来解决此问题。但是，即使使用重置按钮，此计算值也不会消失。

然后SOF的某个人告诉我使用<input ng-model="(value1-0)+(value2-0)" id="value3"/>，但是我注意到即使值在视觉上消失，模型仍然有一些价值。

（当我在第一个输入字段中输入一些值时，第三个计算字段将输入字段的值与第二个输入字段的前一个值（第二个字段在重置之前的值）相加

注意：
使用<input value="{{value1+value2}}" id="value3"/>或<input ng-bind="value1+value2" id="value3"/>

时，重置方法会重置前两个用户输入字段的值，但不会重置第三个计算字段的值

然而，当使用<input ng-model="(value1-0)+(value2-0)" id="value3"/>时，计算字段在视觉上被清除，但是当我在用户输入的字段之一（值1或值2）中输入某个值时，计算字段将输入的数字与字段的前一个数字相加ccontained。

我尝试了很多方法来解决这个问题，但没有成功......有人可以指导我完成吗？

提前致谢 .....

Answer 1

这是一个简单的fiddle。点击链接看看。

基本上，为了在用户输入的字段中只有数字值，我使用了HTML5数字输入，可以在任何较新的浏览器中随时使用。

<div ng-controller="MyCtrl">
  <input type="number" ng-model="value1" />
  <input type="number" ng-model="value2" />
  <input type="text" ng-model="value1 + value2" />
  <button type="button" ng-click="reset()">RESET</button>
</div>

至于javascript，这是我的控制器：

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

myApp.controller('MyCtrl', MyCtrl)

function MyCtrl($scope) {
  $scope.value1 = '';
  $scope.value2 = '';
  $scope.value3 = '';

  $scope.reset = function() {
    $scope.value1 = '';
    $scope.value2 = '';
    $scope.value3 = '';
  };
}

首先将三个值初始化为空字符串，然后在单击RESET按钮时，它们将再次无效。

注意：为了简单起见，我使用数字输入而不是尝试实现某种javascript验证，我建议将其用于生产级别。我的回答只是用最基本的概念解释原理。

ng-model使用HTML重置方法行为不当

1 个答案: