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

【问题标题】：unsure of how to use filters in angularJS不确定如何在 angularJS 中使用过滤器
【发布时间】：2017-05-04 00:52:05
【问题描述】：

在为专辑选择应用程序获取简单过滤器时遇到问题，我正在为使用 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);
    });
});

非常感谢任何帮助。

【问题讨论】：

标签： angularjs html angularjs-filter

【解决方案1】：

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

不过，您的控制器超出了“q”范围变量的范围。

【讨论】：

对不起，您指的是哪个控制器功能？我也尝试过输入我的输入，但我的专辑列表中没有任何显示或更改。
您的控制器和 ng-app 指令位于您尝试将“q”添加到 $scope 的位置下方。将它们移动到上面的元素。
你是对的，我没有将我的指令向上移动，而是将输入向下移动到控制器 div 中。感谢您向我解释，尽管我明白我的思维过程哪里错了！ :)
只需将封闭元素标签视为控制器或应用指令的范围。