在作用域内过滤 AngularJS

Filtering AngularJS inside the scope

本文关键字：AngularJS 过滤 作用域      更新时间：2023-09-26

我正在尝试对我的代码应用某种过滤器，但当我单击菜单时它没有改变任何东西。我最初需要显示我的所有专辑，如果用户点击其中一个艺术家，我想过滤它们。下面是我的控制器：

Function ListCtrl($scope, $http) {
$http({
    method: 'GET',
    url: 'json/json_price_1.json'
}).success(function(data) {
    $scope.artists = data.artists; // response data
    $scope.albums = [];
    $scope.currentArtist = null;
    $scope.setArtist = function(name) {
        $scope.currentArtist = $scope.artists[name];
    };
    if ($scope.currentArtist == null) {
        angular.forEach($scope.artists, function(element, index) {
            angular.forEach(element.albums, function(album, index) {
                $scope.albums.push(album);
            });
        });
    } else {
        angular.forEach($scope.currentArtist.albums, function(album, index) {
            $scope.albums.push(album);
        });
    };
});};

我的 html 如下：

<div ng-controller="ListCtrl">  
<ul class="topcoat-list" ng-repeat="artist in artists">
    <li class="topcoat-list__item">
        <a href="" ng-click="setArtist(artist.name)">
            {{artist.name}}
        </a>
    </li>   
</ul></div>
<div ng-controller="ListCtrl">
<ul ng-repeat="album in albums">
  <li>{{album.title}}</li>
</ul>

谢谢你们的时间！

不是 angularjs 方面的专家，问题是您在设置艺术家后没有过滤专辑。

Function ListCtrl($scope, $http) {
    $scope.setArtist = function (name) {
        $scope.currentArtist = $scope.artists[name];
        $scope.filter();
    };
    $scope.filter = function () {
        $scope.albums = [];
        if (!$scope.currentArtist) {
            angular.forEach($scope.artists, function (element, index) {
                angular.forEach(element.albums, function (album, index) {
                    $scope.albums.push(album);
                });
            });
        } else {
            angular.forEach($scope.currentArtist.albums, function (album, index) {
                $scope.albums.push(album);
            });
        };
    }

    $http({
        method: 'GET',
        url: 'json/json_price_1.json'
    }).success(function (data) {
        $scope.artists = data.artists; // response data
        $scope.currentArtist = undefined;
        $scope.filter()
    });
};

角度解决方案是使用过滤器 - 类似于这个演示

相关文章：