如何检测 ng-repeat 中的输入字段值变化

Posted 2023-05-09

【中文标题】如何检测 ng-repeat 中的输入字段值变化

【英文标题】：How to detect input field value change in ng-repeat

【发布时间】：2017-08-24 08:23:30

【问题描述】：

我将有 N 个输入字段，每个字段都有一个值 CHANGE，而不会进入或失去焦点。如何检测每个输入字段的值变化。

我只找到了一个 question 相关并使用了我尝试关注但它不起作用。任何人都可以进一步帮助

for (var i=0;i<$scope.customers.product.length;i++)

//i m trying to get unique ids and bining input fields for change 
$('#total-i').on('input', function()  
    alert($(this).val()); // get the current value of the input field.
);
   

//there will be multiple of input fields having unique ids
<input id="total-$index" value=cust.price*cust.quantity"/>

【问题讨论】：

你看过docs.angularjs.org/api/ng/directive/ngModel吗？

【参考方案1】：

如果您将ng-model 与输入关联，那么使用ng-change 应该很容易且可行。

<input id="total-$index" value=cust.price*cust.quantity" ng-model="total" ng-change="updatemethod()"/>

total and updatemethod() 应该是控制器$scope 的一部分。

【讨论】：

我需要在我的输入元素中有 value 或 ng-model。使用两者都不会在我的 html 页面上显示空白输出@Panomosh

为什么在 ng-model 存在角度时需要 value 输入？如果您使用的是 jquery，则使用 $('#myContent').keyup(function() 或 .change()

我正在解析我的值中的一个表达式，如果我必须使用 ng-model，那么我必须更改我的大部分 LOC，是的，这是我也认为的唯一出路。在此之前，我想在这里寻求帮助。甚至在我在这里使用标签之前。进入情况让我使用输入字段，现在我认为为模型创造价值将结束问题@anoop

@usman ：即使您使用cust.price*cust.quantity 的标签，那么价格和数量也应该是ng-model 的一部分。您需要将它们放在 ng-model 中，然后才能使用 Angular 2 方式绑定。

是的，它们是模型的一部分，我试图将它们的产品贴在标签上。我取得了很好的成绩。然后我尝试在标签值更改时做一些事情。这让我除了将其更改为模型之外别无他法。 :) 整个故事@anoop

【参考方案2】：

我会创建一个与 ng-model 关联的对象，然后观察它。由于您没有提供小提琴实例的 Codepen 来干预，我不确定这是否有效，请查看。

//for each index
$.each(modelObject, function(key, value) 
   //set a watcher
   var watchString = "modelObject[" +key + "]";  
   $scope.$watch(watchString, function (newValue, oldValue) 
      $scope.update(modelObject[key]);
   );
);

【讨论】：

如果您正在为我的输入字段创建 ng-model 并观看它。然后讨论结束..请阅读我的问题是什么以及我们都在这个问题上谈论了什么

【参考方案3】：

您在问题中链接的问题与 Angular 无关（它使用 jQuery）。 Angular 方式在哪里（考虑到您使用ng-repeat 显示输入）：

<div ng-repeat="i in items">
    <input ng-model="i" ng-change="update(i)"/>
</div>

使用此代码，每当您更新i（例如：当您更改输入值时），update(i) 方法都会被触发。

---

这是我正在解释的一个小例子：

function MyCtrl($scope) 
    $scope.items = ['1', '2', '3', '4', '5'];
    
    $scope.update = function(item) 
        alert(item + ' has been changed!');
    

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="MyCtrl">
    <div ng-repeat="i in items">
        <input type="text" ng-model="i" ng-change="update(i)"  />
    </div>
</div>

【讨论】：

这种 ng-change 方法仅在我们将焦点移入或移出输入字段时才有效。而我正在使用表达式更改输入字段的值，而表达式变量的值使用我页面上存在的其他输入字段进行更改。因此，我引用了与我的问题相关的唯一问题

@Usman 您可以在每个变量上设置watcher 以获取更改事件。

你能告诉我如何通过ID添加观察者吗？因为我没有该重复输入字段的任何特定变量名称，但 ID