CODEWITHSUNDEEP
angularjshtmlangularjs-filter
Zohranio
Zohranio

Reputation: 49

unsure of how to use filters in angularJS

Having issues getting a simple filter to work for an album selection app i'm building for experience using jsonplaceholderdata. I tried to set ng-model to an expression and filtering by that expression but nothing changes when i enter text into my input bar. Unsure as to what I'm missing. 

<!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>

This is my angular js code:

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);
    });
});

Any help is much appreciated.

Upvotes: 0

Views: 76

Answers (1)

nfproductions
nfproductions

Reputation: 94

You don't need to use a controller function. Because your q is already on the $scope, it will work as soon as you start typing in the input box.

Your controller is outside of the scope of the 'q' scope variable though.

Upvotes: 1

Related Questions