Question

我正在尝试通过属性FacilityId过滤数组（课程）。

我的控制器中的所有$ http调用都得到了回复，如下所示：

function holeIndexController($scope, $http) {
    $scope.facilities = [];
    $scope.courses = [];
    $scope.holes = [];

    getFacilities();
    getCourses();
    getHoles();

    function getFacilities() {
        $http({
                method: 'GET',
                url: '/api/facility'
            }).
            success(function(result) {
                $scope.facilities = result;
            }).error(function () {
                console.log("Error: " + result.ExceptionMessage);
                alert("Could not load facilities");
            });
    }

    $scope.courseByFacility = function (facilities) {
        return function(courses) {
            return course.facilityId === facility.facilityId;
        };
    };

    function getCourses() {
        $http({
            method: 'GET',
            url: '/api/course'
        }).
        success(function (result) {
            $scope.courses = result;
        }).error(function (result) {
            console.log("Error: " + result.ExceptionMessage);
            alert("Could not load courses");
        });
    }

    function getHoles() {
        $http({
                method: 'GET',
                url: '/api/hole'
            }).
            success(function(result) {
                getFacilities();
                $scope.holes = result;
            }).error(function(result) {
                console.log("Error: " + result.ExceptionMessage);
                alert("Could not load courses");
            });
    }

}

我的HTML如下：

<div data-ng-repeat="f in facilities">
            Facility: {{f.Name}}
            <div data-ng-repeat="c in courses | filter: coursesByFacility">
                Course: {{c.Name}}
            </div>
        </div>

根据各自的FacilityId过滤课程的最佳方法是什么？

Answer 1

将设施传递给过滤器功能，如：

<div ng-repeat="c in courses | filter:coursesByFacility(f)">

此外，您的coursesByFacility函数会使用courses参数，但之后您会尝试对course（无）执行操作。将此更改为：

$scope.coursesByFacility = function(facility) {
  return function(course) {
    return course.facilityId === facility.facilityId;
  }
}

请参阅此jsbin

编辑：没有意识到jsbin链接将删除所有代码，因此您无法看到它。无论如何，只需查看来源，它是最小的，易于阅读

Answer 2

您可以创建一个名为getCoursesByFacility（）的函数，该函数具有facilityId参数。该函数应遍历课程列表并使用该facilityId构建一系列课程，然后返回列表。然后，您需要从您的JavaScript调用该函数。这样的事情应该有效：

    <div data-ng-repeat="f in facilities">
        Facility: {{f.Name}}
        <div data-ng-repeat="c in getCoursesByFacility(f.facilityId)">
            Course: {{c.Name}}
        </div>
    </div>

使用Angular过滤数组

2 个答案: