Angular(V1.5.3) 过滤器

Question

我目前正在处理一个页面，我希望其中有两条信息，一个扇区数组，当单击特定扇区时，它将根据与其关联的项目过滤其下方的列表。

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

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

我的控制台没有任何错误，我认为它可能是我控制器上的空值，但我不确定，我们将不胜感激。

这是我的控制器中的数组（目前...）以及 public 函数和作用域变量，将在 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

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

正如我在评论中所说，您在 dom 的两个不同部分声明了两次 ng-controller。在 angular 中，控制器不像服务那样共享，因此您有两个不同的控制器，并且您的 var 扇区不是 "see" 您的过滤器。

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

<body ng-controller="MainCtrl">
  ...
</body>

Angular(V1.5.3) 过滤器

Angular(V1.5.3) filters

filtering

filter

angularjs

angular-filters