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() }}

但是如果你想让用户能够编辑结果并且（让我们说）第二次被分配（结果 - 第一次），那么你在视图中想要这样的东西（顺便说一下，注意类型= “号”）：

<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;
}

如何动态更改输入值

1 个答案: