ng-repeat td 中的输入字段不会触发功能[重复]答案

【问题标题】：Input field within ng-repeat td does not trigger function [duplicate]ng-repeat td 中的输入字段不会触发功能[重复]
【发布时间】：2018-08-09 06:49:30
【问题描述】：

学习 angularjs，我正在创建一个表格，当一行创建一个新的输入字段时，您可以在其中放置一个数字，它会进行一些计算，但是当我更新该字段时它什么也不做。我对其进行了测试，并且输入字段在表格之外，它的工作方式应该如此，那么是什么导致输入字段在 td 标签内时没有响应？

这是我的代码： HTML

<h3>ng-repeat example</h3>

<div ng-app="myApp" ng-controller="myCtrl">
   <label>Data Total:</label>
   <input type="number">
   <label>Amount:</label>
   <input type="number" id="total" ng-model="total" ng-change="upateEntries()">
   <label for="input_nr">Users:</label>
    <input type="number" ng-model="entries" ng-change="upateEntries()" class="form-control" id="input_nr" min="0" step="1" value="0">
    </br>

    <table>
       <tr>
          <th>Users</th>
          <th>User Data Total</th>
          <th>Cost</th>
       </tr>
       <tr ng-repeat="item in items track by $index">   
          <td>{{item}}</td>
          <td><input type="number" ng-model="userData" ng-change="updateData()"></td>
          <td>{{amts}}</td>
          <td>{{costs}}</td>
       </tr>
    </table>
</div>

var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope){
    $scope.total = 0; 
    $scope.entries = 0;
    $scope.userData = 0;
    $scope.items = [];
    $scope.upateEntries = function () {
        $scope.items = [];
        for (var i = 0; i < $scope.entries; i++) {
           $scope.items.push(i + 1);
           $scope.amts = ($scope.total / $scope.entries);
        }
    }

    $scope.updateData = function(){
       $scope.costs = $scope.userData * $scope.total;
    }
});

要玩的笔的链接：https://codepen.io/beartato327/pen/jpQywv

提前感谢您的帮助。

【问题讨论】：

新的 AngularJS 开发人员通常没有意识到 ng-repeat、ng-switch、ng-view、ng-include 和 ng-if 都创建了新的子作用域，所以当这些指令时经常会出现问题参与其中。

标签： javascript angularjs angularjs-ng-repeat angular-ngmodel

【解决方案1】：

updateData 函数肯定会在您的输入更改时调用。问题是 $scope.userData 始终为 0。看起来 userData 范围与 ng-repeat/item 范围冲突。用一个简单的对象包装userData 解决了这个问题：

$scope.container = {
   userData: 0
};
$scope.updateData = function(){
   $scope.costs = $scope.container.userData * $scope.total;
}

和

<tr ng-repeat="item in items track by $index">
   <td><input type="number" ng-model="container.userData" ng-change="updateData()"></td>
   <td>{{costs}}</td>
</tr>

【讨论】：