Angular - display table rows with empty values (TypeError: Cannot read property 'length' of undefined)

Question

我在嵌套 ng-repeat 中显示 table 数据的视图中有以下内容。

我想要的是仅显示包含空单元格的行 (<textarea>) - 当 link 单击以应用过滤器时。 link 的文本也应更改为“显示所有数据”，以便再次单击它时将恢复显示所有数据。

<a class="btn btn-primary" href="#" ng-click="view.applyMissingValuesFilter(view.missingValuesButtonText)">{{view.missingValuesButtonText}}</a>

<table class="table">
    <tr>
        <th>Resource Id</th>
        <th ng-repeat="locale in view.resourceGridResources.Locales">
            {{locale ? locale : "invariant" }}
        </th>
    </tr>
    <tr ng-repeat="resource in view.resourceGridResources.Resources">
        <td>{{resource.ResourceId}}</td>
        <td ng-repeat="res in resource.Resources">
            <textarea ng-model="res.Value"
                      ng-blur="view.saveGridResource(res)"
                      style="min-width: 300px"></textarea>
        </td>

    </tr>
</table>

我已经在控制器中尝试了以下位置 - 只是为了尝试显示带有空数据的行：

vm.applyMissingValuesFilter = function (linktext) {

        var results = [];

        var temp = vm.resourceGridResources.Resources;

        for (var i = 0; i < temp.length; i++) {
            for (var j = 0; j < temp[i].resources.length; j++) {
                if (temp[i].resources[j] === '') {
                    results.push(temp[i]);
                }
            }
        }

        console.log(results);

        linktext === "Display Rows with missing data"
            ? vm.missingValuesButtonText = "Show all data"
            : vm.missingValuesButtonText = "Display Rows with missing data";

    };

我遇到错误：

TypeError: Cannot read property 'length' of undefined
   at listController.vm.applyMissingValuesFilter (listController.js:67)
   at fn (eval at compile (angular.js:13275), <anonymous>:4:442)
   at f (angular.js:23481)
   at n.$eval (angular.js:15922)
   at n.$apply (angular.js:16022)
   at HTMLAnchorElement.<anonymous> (angular.js:23486)
   at HTMLAnchorElement.dispatch (jquery.js:4430)
   at HTMLAnchorElement.r.handle (jquery.js:4116)

如果我只是做类似 console.log(temp.length) 的事情 - 它会输出正确的长度。

或者有没有更简单的方法来完成这个？我考虑过使用正则表达式，比如 (<td ng-repeat="res in resource.Resources" | match: ^$) 但我确信有更好的方法使用过滤器？

Answer 1

Your object name is Resources, not resources.

请在第二个循环中更改 temp[i].Resources 而不是 temp[i].resources 并且您还应该将此行 temp[i].resources[j] 更改为 temp[i].Resources[j]

  for (var i = 0; i < temp.length; i++) {
            for (var j = 0; j < temp[i].Resources.length; j++) {
                if (temp[i].Resources[j] === '') {
                    results.push(temp[i]);
                }
            }
        }

编辑：

您可能还需要将 temp[i].resources[j]==='' 更改为 temp[i].resources[j].Value===''

Angular - display table rows with empty values (TypeError: Cannot read property 'length' of undefined)

Angular - display table rows with empty values (TypeError: Cannot read property 'length' of undefined)

javascript

for-loop

angularjs

angularjs-ng-repeat

编辑：