Question

我目前正在编写一个页面，我希望在那里有两条信息，一组扇区，当点击特定扇区时，它将根据与之关联的项目过滤下面的列表。

我试图通过在Angular中使用$ filter服务过滤掉项目来实现这一点。但出于某种原因，当我点击相应的扇区时，一切都没有发生。它只是保持不变。

这是一张图片（一个非常基本的布局），只是为了向您展示：Trying to filter a list.

我的控制台中没有任何错误，我认为它可能是我控制器上的空值，但我不确定，任何帮助都会受到赞赏。

以下是我的控制器中的数组（现在......）以及要在html中使用的公共函数和范围变量：

$scope.sectors = [
{"id": 0, "name": "Branding", "image": "assets/01_WORK_TILE.jpg"},
{"id": 1, "name": "Retail Design", "image": "assets/WORK_RETAILDESIGN.jpg"},
{"id": 2, "name": "Food & Beverage Design", "image": "assets/WORK_F&B.jpg"},
{"id": 3, "name": "Graphic Communication", "image": "assets/06_WORK_TILE.jpg"},
{"id": 4, "name": "Masterplanning", "image": "assets/WORK_MASTERPLANNING.jpg"},
{"id": 5, "name": "Public Spaces", "image": "assets/WORK_PUBLICSPACES.jpg"},
{"id": 6, "name": "Strategic Insights", "image": "assets/WORK_STRATEGICINSIGHTS.jpg"},
{"id": 7, "name": "Signage & Wayfinding", "image": "./assets/WORK_SIGNAGE&WAYFINDING.jpg"}

];

$scope.projects = [
{"id": 0, "name": "UK Coffee week", "image": "cw-avatar", "desc": "Using coffee to do good!", "sector": "Branding"},
{"id": 1, "name": "Lexicon", "image": "lexicon-avatar", "desc": "Transforming a Town.", "sector": "Branding"},
{"id": 2, "name": "Ajmal", "image": "ajmal-avatar", "desc": "Fragrance for everyone.", "sector": "Retail Design"},
{"id": 3, "name": "Aelia", "image": "aelia-avatar", "desc": "A World first for travel retail.", "sector": "Retail Design"},
{"id": 4, "name": "Amuse", "image": "amuse-avatar", "desc": "Developing a World of beauty.", "sector": "Retail Design"},
{"id": 5, "name": "Johnnie Walker", "image": "jwalker-avatar", "desc": "A new arrival at Amsterdam Airport.", "sector": "Food & Beverage Design"},
{"id": 6, "name": "Fine Foods", "image": "finefoods-avatar", "desc": "?", "sector": "Graphic Communication"},
{"id": 7, "name": "Nice Duty Free", "image": "nice-avatar", "desc": "?", "sector": "Graphic Communication"},
{"id": 8, "name": "Al Maryah Island", "image": "maryah-avatar", "desc": "?", "sector": "Signage & Wayfinding"},
{"id": 9, "name": "British Land", "image": "britishland-avatar", "desc": "Superior signage and wayfinding.", "sector": "Signage & Wayfinding"}

];

$scope.currentSector = null;

function setCurrentSector(sector) {
$scope.currentSector = sector;
}

$scope.setCurrentSector = setCurrentSector;

以下是我的视图文件中的标记：

<div layout="column" flex>
    <ul ng-controller="WorkController" ng-repeat="sector in sectors">
        <li style="list-style: none; font-family: portland-bold-font;">
            <a ng-click="setCurrentSector(sector);">{{ sector.name }}</a>
        </li>
    </ul>
</div>

<div class="animation-element slide-up" style="font-size: 0;">
    <p style="height: 25%; text-align: center; background: black; font-family: portland-bold-font; color: white; margin: 0; padding: 0%; font-size: 2.5vw;" ng-cloak>
    Lorem ipsum dolor sit amet, consectetur<br /> adipisicing elit, sed do eiusmod tempor<br /> incididunt ut labore et dolore
    </p>
</div>

<div layout="column" style="background:white;">
    <ul ng-controller="WorkController" ng-repeat="project in projects | filter:currentSector.name">
        <li style="list-style: none; font-family: portland-bold-font;">{{ project.name }}</li>
    </ul>
</div>

Answer 1

您必须指定要过滤的字段：

<ul ng-repeat="project in projects | filter: { sector: currentSector.name}">
    <li style="list-style: none; font-family: portland-bold-font;">{{ project.name }}</li>
</ul>

Answer 2

看看这个plunker：https://plnkr.co/edit/fwXN2YjR84iOfp5wuQO1?p=preview

正如我在评论中所说，你在dom的两个不同部分声明两次ng-controller。角度控制器不像服务那样共享，所以你有两个不同的控制器，你的var扇区没有被你的过滤器“看到”。

我将DOM封装到body中并在body上声明控制器：

<td>
    {{ address.id }}
</td>
<td>
    {{ address.label }}
</td>
<td>
    <input type="text"
           ng-model="addresstext"/>
</td>
...

Angular（V1.5.3）过滤器

2 个答案: