在ng-init中为每个ng-repeat加载函数不会分配返回值

Question

我有一个两层表，我希望为其添加值。该表是动态加载的，当每个文本框加载时，我已经调用了函数发送来自两个ng重复项的函数，以便我可以检查它是哪个单元格文本框，以及是否存在它的值将它添加到ng-model =结果。该函数可以工作，但是，返回的值不会显示在文本框中。我不知道我做错了。这是我的表代码：

<div class="divTable"> 
    <div class="divTableHeading"> 
     <div class="divTableRow"> 
     <div class="divTableCell"></div> 
     <div class="divTableCell" ng-repeat='item in TestingTable[1].EnvironmentTypes'>{{item.Name}}</div> 
     </div> 
    </div> 
    <div class="divTableBody"> 
     <div class="divTableRow" ng-repeat='item in TestingTable[0].TestingType'> 
     <div class="divTableCell">{{item.Name}}</div> 
     <div class="divTableCell" ng-repeat="x in TestingTable[1].EnvironmentTypes"> 
      <input type="text" ng-model="result" ng-init="result = loadData(x, $parent.item)"> 
     </div> 
     </div> 
    </div> 
    </div> 

而且我与loadData功能的JavaScript代码：

myApp.controller('ctrl', ['$scope', function($scope) { 
    var initial = 0; 
    $scope.TestingTable = [{ 
     TestingType: [{ 
      Id: 1, 
      Name: "Functional Testing" 
     }, 
     { 
      Id: 2, 
      Name: "Regression Testing" 
     }, 
     { 
      Id: 3, 
      Name: "Integration" 
     }, 
     { 
      Id: 4, 
      Name: "BVT" 
     } 
     ] 
    }, 
    { 
     EnvironmentTypes: [{ 
      Id: 1, 
      Name: "Dev/QE (VCD)" 
     }, 
     { 
      Id: 2, 
      Name: "Staging" 
     }, 
     { 
      Id: 3, 
      Name: "PPE" 
     }, 
     { 
      Id: 4, 
      Name: "01's" 
     } 
     ] 
    } 
    ]; 

    $scope.Testing = [{ 
     Id: 1, 
     "TestingTypeId": 1, 
     TestingType: "Functional Testing", 
     EnvironmentTypeId: 1, 
     EnvironmentType: "Dev/QE (VCD)", 
     value: 100 
    }, 
    { 
     Id: 2, 
     "TestingTypeId": 3, 
     TestingType: "Integration", 
     EnvironmentTypeId: 1, 
     EnvironmentType: "Dev/QE (VCD)", 
     value: 98 
    } 
    ]; 

    $scope.loadData = function(entype, type) { 


    if ($scope.Testing !== undefined) { 
     angular.forEach($scope.Testing, function(item) { 
     if (item.TestingTypeId === type.Id && item.EnvironmentTypeId === entype.Id) { 
      return item.Value; 
     } else { 
      return initial; 
     } 
     }); 
    } 
    }; 

}]); 

有人能指出什么即时通讯做错误？

更新

这里是我的代码有plunker至今click

Answer 1

首先，你是误用ng-init，因为这是在ng-repeat里面执行的，所以你每次都是重新初始化result模型。您应该多读一些关于ng-model的信息，如果您对TestingType和EnvironmentType的每个组合都有一个Testing，那么这将是一个很好的解决方案，但情况并非如此。

另外，您的loadData函数未返回值。这些return位于由forEach的每次迭代执行的回调函数中，因此它们根本不返回loadData函数。

要解决你的代码，我只是改变ng-init和ng-model到ng-value我认为它更适合于这种情况：

<input type="text" ng-value="loadData(x, $parent.item)"> 

...和固定您的loadData功能：

$scope.loadData = function (entype, type) { 
    var value = 0; 
    if ($scope.Testing !== undefined) { 
    for (var i = 0; i < $scope.Testing.length; i++) { 
     var item = $scope.Testing[i]; 
     if (item.TestingTypeId === type.Id && item.EnvironmentTypeId === entype.Id) { 
     value = item.value; 
     break; 
     } 
    } 
    } 
    return value; 
}; 

您的forEach中的else也是错误的，因为如果第一项匹配，第二项将输入else块并覆盖该值，这就是为什么我删除了else并使用了break。

我认为代码可以改进，但是这解决了你最初的问题。

---

Here is your plunker fixed.

Answer 2

你需要做以下同

https://scotch.io/tutorials/building-dynamic-angular-forms-with-ngrepeat-and-ngform

<form name="userForm" novalidate> 

    <div class="form-group" ng-repeat="user in formData.users"> 
    <label>{{ user.name }}'s Email</label> 
    <input type="text" class="form-control" name="email" ng-model="user.email" required> 
    <p class="help-block" ng-show="userForm.email.$invalid">Valid Email Address Required</p> 
    </div> 

</form> 

注意如何ng-repeat是正在使用