Question

我有一个从.csv文件创建的数组，我在初始页面加载时显示所有这些数据，但点击一下按钮后，我只想显示用户点击的建筑物名称的结果。

以下是html代码：

<div class="row" data-ng-controller="StaffListCtrl">
            <div class="small-12 columns" >
                <h1 class="">The Public Schools of Petoskey Staff</h1>
                <header ng-include="'pages/header.html'"></header>
                <div class="row">
                    <div class="small-2 columns"><h4>BUILDING</h4></div>
                    <div class="small-3 columns"><h4>NAME</h4></div>
                    <div class="small-2 columns"><h4>PHONE</h4></div>
                    <div class="small-4 columns"><h4>EMAIL</h4></div>
                </div>
                <div class="row"  id="centralBuilding" data-ng-model="buildingName.central" ng-repeat="person in staff">
                    <div class="small-2 columns">{{ person.getBuilding() }}</div>
                    <div class="small-3 columns">{{ person.getFirstName() }} {{ person.getLastName() }}</div>
                    <div class="small-2 columns">{{ person.getPhone() }}</div>
                    <div class="small-4 columns">{{ person.getEmail() }}</div>
                </div>
            </div>
            <footer ng-include="'pages/footer.html'"></footer>
        </div>

以下是header.html代码：

<div class="row">
    <button class="round" id="building1">Building1</button>
    <button class="round" id="building2">Building2</button>
    <button class="round" id="building3">Building3</button>
</div>

这是我的AngularJS代码：

app.js：

(function () {
    "use strict";

    angular.module('staffApp', []);
})();

controller.js：

(function() {
    "use strict";

    angular.module('staffApp')
        .controller('StaffListCtrl', listStaff);

    function listStaff($scope) {
        $scope.filters = {};
        $scope.staff = setStaffData();
    }
})();

Answer 1

在你提供的小提琴中，我发现只有轻微的错误

而不是$ scope.filterByBuilding，而是提到$scope.filterBuilding
使用data/staff2.csv代替staffList.csv

看看这个有用的演示

<强> Working Demo

<强>脚本

(function () {
    "use strict";

    angular
        .module('staffApp', [])
        .controller('StaffListCtrl', MainCtrl);

        function MainCtrl($scope) {
        $scope.staff = setStaffData();

        $scope.filterByBuilding = function(building) {
            $scope.filterBuilding = building;
        };
    }
})();

<强> HTML

<body ng-app="staffApp">
    <div class="row" data-ng-controller="StaffListCtrl">
        <div class="small-12 columns">
                <h1 class="">Staff List</h1>

            <div class="row">
                <button class="round" id="buildingA" ng-click="filterByBuilding('buildingA')">Building A</button>
                <button class="round" id="buildingB" ng-click="filterByBuilding('buildingB')">Building B</button>
            </div>
            <div class="row">
                <div class="small-2 columns">
                    <h4>BUILDING</h4>
                </div> 
                <div class="small-3 columns">
                    <h4>NAME</h4>
                </div>
                <div class="small-2 columns">
                    <h4>PHONE</h4>
                </div>
                <div class="small-4 columns">
                    <h4>EMAIL</h4>
                </div>
            </div>
            <div class="row" data-ng-repeat="person in staff | filter:{building:filterBuilding}">
                <div class="small-2 columns">{{ person.getBuilding() }}</div>
                <div class="small-3 columns">{{ person.getFirstName() }} {{ person.getLastName() }}</div>
                <div class="small-2 columns">{{ person.getPhone() }}</div>
                <div class="small-4 columns">{{ person.getEmail() }}</div>
            </div>
        </div>
    </div>
  </body>

如何根据按钮单击显示过滤结果？

1 个答案: