0
アルバムセレクションアプリで動作するように単純なフィルタを取得することに問題があるので、jsonplaceholderdataを使用して経験を積み重ねています。 ng-modelを式に設定し、その式でフィルタリングしようとしましたが、入力バーにテキストを入力すると何も変わりません。私が行方不明になっていることは分かりません。angularJSでフィルタを使用する方法がわからない
<!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);
});
});
すべてのヘルプははるかに高く評価されます。
申し訳ありませんが、どのコントローラ機能を使用していますか？私も自分の入力に入力しようとしましたが、私のアルバムリストに何も表示されない、または変更されていません。 – Zohranio
コントローラとng-appディレクティブは、$ scopeに 'q'を追加しようとしている場所の下にあります。それらを上の要素に移動します。 – nfproductions
あなたが正しいです、私の指示を動かすのではなく、ちょうど入力をコントローラdivに移動しました。私の思考プロセスが間違っていたところを理解していますが、私に説明してくれてありがとう！ :) – Zohranio