Question

我是AngularJS的新手，并尝试让我的桌子只显示 < / em> 当用户从 排序方式中选择 ＆＃39; 项目时下拉菜单。

这是我的排序菜单代码：

<label>Sort By:</label> <select ng-model="orderProp"> <option value="title">Title</option> <option value="filename">File Name</option> <option value="class">Classification</option> <option value="color">Color Only</option> </select>

这是我的表格代码：

<table> <thead> <tr> <th>Classification</th> <th>Title</th> <th>File</th> <th>Color</th> </tr> </thead> <tbody> <tr ng-animate="'animate'" ng-repeat="item in filtered = (pptData | filter: query | orderBy: orderProp)"> <td>{{item.class | uppercase}}</td> <td>{{item.title}}</td> <td>{{item.filename}}</td> <td>{{item.color}}</td> </tr> </tbody> </table>

我尝试在ng-repeat指令中添加ng-if =＆＃34; color＆＃34;但这不起作用。直播link here。

Answer 1

使用

ng-if="orderProp !== 'color'  || item.color"

在ng-repeat元素上。

正如您所知，当您在Angular指令表达式中引用属性时，将针对当前$scope解析该属性。 ng-repeat为每次迭代创建子范围。指定ng-repeat="item in collection"后，您可以通过属性item引用该子范围。

color属性位于item子范围内，不位于外部范围内。因此，说ng-if="color"将导致没有任何行被渲染，因为$scope.color未定义。 ng-if="item.color"将针对item范围进行解析，只有在定义item.color时才会呈现该行。

但是，如果您只想在用户选择color过滤选项时过滤掉这些行，则需要确保检查orderProp。因此，

ng-if="orderProp !== 'color' || item.color"

获取您正在寻找的行为。

我怀疑在开发代码时，您会希望继续对这些行进行更复杂的过滤。在这种情况下，我建议改为在控制器中编写一个函数：

$scope.shouldShowRow = function(row, index) {
    var show = $scope . orderProp !== 'color" || row.color;
    // more logic for determining show/hide here
    return show;
}

然后在你的模板中：

<tr ng-repeat="item in (pptData | filter: query | orderBy: orderProp)"
    ng-if="shouldShowRow(item, $index)">
    <!-- your row markup here -->
</tr>

$ index是ng-repeat创建的便利值。你可能不需要它，但它可能有用。

作为建议，您应该查看controllerAs语法。它要求您命名所有控制器的范围，并帮助您跟踪您在以下情况下使用的范围：

<div ng-controller="MyController as my">
    ...
    <tr ng-repeat="item in (my.pptData | filter: query | orderBy: my.orderProp)"
        ng-if="my.shouldShowRow(item, $index)">
        ...
    </tr>
</div>

ControllerAs：
http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/

如何使用ng-if按值对表进行排序？

1 个答案: