不确定如何在 angularJS 中使用过滤器

Question

我在为使用 jsonplaceholderdata 的经验而构建的相册选择应用程序中使用简单过滤器时遇到问题。我试图将 ng-model 设置为一个表达式并按该表达式进行过滤，但是当我在输入栏中输入文本时没有任何变化。不确定我错过了什么。

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script type="text/javascript" src="album.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="album.css">
</head>
<body>
    <div class="bar">
            <input type="text" class="search" ng-model="q" placeholder="Enter your search terms" />
            <button ng-click="search(q)">Search</button>
    </div>
    <div ng-app="myApp" ng-controller="AlbumCtrl">
        <div ng-click="showme = !showme" ng-init="count=0" ng-repeat="album in albumData|filter:q" id="thumbWrapper">
            <h1>{{album.id}}</h1> 
            <p>{{album.title}}</p>
            <div id="thumbList"ng-show="showme"class="albumContent">
                <ul ng-controller="PhotoCtrl" id="thumbList">
                    <li ng-repeat="photo in photoData" ng-if="album.userId == photo.albumId">
                        <img ng-src={{photo.url}}>
                    </li>
                </ul>
            </div>
        </div>
    </div>

这是我的angular js代码：

var app = angular.module('myApp', []);
app.controller('AlbumCtrl', function ($scope, $http) {
    $http.get("http://jsonplaceholder.typicode.com/albums").then(function(response) {
        $scope.albumData = response.data;
        console.log($scope.albumData);
    });
});
app.controller('PhotoCtrl', function($scope, $http) {
    $http.get("http://jsonplaceholder.typicode.com/photos").then(function(response) {
        $scope.photoData = response.data;
        // console.log($scope.photoData);
    });
});

非常感谢任何帮助。

Answer 1

您不需要使用控制器功能。因为您的 q 已经在 $scope 中，所以只要您开始在输入框中输入，它就会起作用。

您的控制器在 'q' 范围变量的范围之外。

不确定如何在 angularJS 中使用过滤器

unsure of how to use filters in angularJS

angularjs

html

angularjs-filter