如何动态更改输入值

Question

我正在尝试向用户显示一些可编辑的结果,因此我通过输入字段显示它们.这是我正在做的一个基本的例子:

<div class="form-group">
    <label>First number</label>
    <input type="text" ng-model="first" ng-required="true" class="form-control">
</div>

<div class="form-group">
    <label>Second number</label>
    <input type="text" ng-model="second" ng-required="true" class="form-control">
</div>

<div class="form-group">
    <label>The sum is: {{first + second }}</label>
    <input type="text" ng-model="result" ng-required="true" class="form-control">
</div>

在结果的div中,我使用了一个标签来测试结果是否正确获取,并且确实如此.但是,如果我编辑first或second值,则输入result不会更新.

这是使用的控制器(是的,表单是模态):

var ModalInstanceCtrl = function ($scope, $modalInstance) {

   $scope.result = $scope.first + $scope.second;

   $scope.confirm = function () {
      $modalInstance.close(result);
   };

   $scope.cancelNewBet = function () {
      $modalInstance.dismiss('cancel');
   };
};

我认为,一旦我定义了它的获取方式,该值就会自动更新.但显然它错过了通过脚本改变结果的东西......

提前致谢.

Answer 1

当用户编辑结果输入时,您希望发生什么？你想要数据绑定中断(我假设没有并忽略这种可能性)？您是否希望其中一个输入调整到正确的值？

如果您只想显示输出,请在控制器中执行此操作:

$scope.result = function() { return $scope.first + $scope.second; }

在你看来:

{{ result() }}

但是如果你希望用户能够编辑结果并且(比方说)第二次被分配(结果 - 第一次),那么你在视图中想要这样的东西(顺便说一下,注意type ="number "):

<input type="number" ng-change="adjustResult()" ng-model="first">
<input type="number" ng-change="adjustResult()" ng-model="second">
<input type="number" ng-change="adjustInput()" ng-model="result">

在你的控制器中:

$scope.adjustResult = function() {
  $scope.result = $scope.first + $scope.second;
};
$scope.adjustResult(); // initialize result

$scope.adjustInput = function() {
  $scope.second = $scope.result - $scope.first;
}