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

Question

我有两层 table 我想增加价值。 table 是动态加载的，当加载每个文本框时，我调用了一个函数，从两个 ng repeats 发送项目，这样我就可以检查它是哪个单元格文本框，如果存在它的值，将它添加到ng-模型 = 结果。该函数有效，但是，返回值未显示在文本框中。我不知道我做错了什么..这是我 table 的代码：

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

还有我的 javascript 带有 loadData 函数的代码：

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

}]);

有人能指出我做错了什么吗？

更新

这是我目前拥有的代码的插件 click

Answer 1

你需要做同样的事情如下

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 的使用方式

Answer 2

首先，你误用了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.

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

Loading function in ng-init for each ng-repeat doesnt assign return value

javascript

angularjs

angularjs-ng-repeat