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>

这是我的角度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中使用过滤器

1 个答案: