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

}]);

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

更新

这是我的代码到目前为止click

的plunker

Answer 1

首先，您滥用ng-init，因为这是在ng-repeat内执行，每次重新初始化 result模型。您应该阅读更多关于ng-model的内容，如果Testing和TestingType的每个组合都有一个EnvironmentType，那将是一个不错的解决方案，但实际情况并非如此。

此外，您的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;
};

else内的forEach也是错误的，因为如果第一项匹配，第二项会进入else块并覆盖该值，这就是我删除{ {1}}并使用了else。

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

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

ng-init中每个ng-repeat的加载函数不指定返回值

2 个答案: