Angular JS在更改后更新输入字段

Posted 2023-03-05

【中文标题】Angular JS在更改后更新输入字段

【英文标题】：Angular JS update input field after change

【发布时间】：2012-09-23 00:07:31

【问题描述】：

我正在尝试在 Angular 中构建一个简单的计算器，如果需要，我可以在其中覆盖总数。我有这部分工作，但是当我返回在字段一或二中输入数字时，字段中的总数没有更新。

这是我的 jsfiddle http://jsfiddle.net/YUza7/2/

表格

<div ng-app>
  <h2>Calculate</h2>

  <div ng-controller="TodoCtrl">
    <form>
        <li>Number 1: <input type="text" ng-model="one">  
        <li>Number 2: <input type="text" ng-model="two">
        <li>Total <input type="text" value="total()">       
        total()
    </form>
  </div>
</div>

javascript

function TodoCtrl($scope) 
    $scope.total = function()
        return $scope.one * $scope.two;
    ;

【问题讨论】：

正如@Martin 所说，您需要将输入绑定到可写值（因此不是函数），以便能够从控制器中的 $scope 取回它。

【参考方案1】：

您可以将ng-change 指令添加到输入字段。查看文档example。

【讨论】：

发现 ng-change 更合适，因为它不会干扰初始加载的元素

虽然是一个有用的答案，但它可以作为仅链接的答案。在现场有一个例子会很棒，指的是来自 OP 的具体问题......

您应该在指令中使用 $watcher，而不是在视图中使用带有“回调”的 ng-change。观察指令代码中的数据并将注销函数保存在 var 中，以便在作用域事件 $destroy 触发时调用它。

【参考方案2】：

我猜当你在总计字段中输入一个值时，值表达式会以某种方式被覆盖。

但是，您可以采取另一种方法：为总值创建一个字段，并在 one 或 two 更改时更新该字段。

<li>Total <input type="text" ng-model="total">total</li>

并更改 javascript：

function TodoCtrl($scope) 
    $scope.$watch('one * two', function (value) 
        $scope.total = value;
    );

例如小提琴here。

【讨论】：

+1 输入字段应始终具有关联的 ng-model/$scope 属性。不应在 Angular 应用程序中使用“值”参数。另请参阅***.com/questions/10610282/…

【参考方案3】：

我编写了一个指令，您可以使用该指令将 ng-model 绑定到您想要的任何表达式。每当表达式更改时，模型都会设置为新值。

 module.directive('boundModel', function() 
      return 
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel) 
          var boundModel$watcher = scope.$watch(attrs.boundModel, function(newValue, oldValue) 
            if(newValue != oldValue) 
              ngModel.$setViewValue(newValue);
              ngModel.$render();
            
          );

          // When $destroy is fired stop watching the change.
          // If you don't, and you come back on your state
          // you'll have two watcher watching the same properties
          scope.$on('$destroy', function() 
              boundModel$watcher();
          );
        
    );

您可以像这样在模板中使用它：

 <li>Total<input type="text" ng-model="total" bound-model="one * two"></li>      

【参考方案4】：

你只需要更正你的html格式

<form>
    <li>Number 1: <input type="text" ng-model="one"/> </li>
    <li>Number 2: <input type="text" ng-model="two"/> </li>
        <li>Total <input type="text" value="total()"/>  </li>      
    total()

</form>

http://jsfiddle.net/YUza7/105/

【讨论】：

这个问题是如果我更改总数，然后去更改数字 1 或数字 2，总数不再有效，因为我会覆盖“值”。使用ng-change没有这个问题

【参考方案5】：

创建一个指令并对其进行监视。

app.directive("myApp", function()
link:function(scope)

    function:getTotal()
    ..do your maths here

    
    scope.$watch('one', getTotals());
    scope.$watch('two', getTotals());
   

)