Javascript AngularJS筛选器无法处理从JSON文件加载的数据
我是AngularJS的新手，我有以下代码，我想根据用户输入动态过滤我正在显示的列表，有点像google，我可以加载数据并显示在表上，但由于某些奇怪的原因，过滤功能不起作用。感谢您的帮助Javascript AngularJS筛选器无法处理从JSON文件加载的数据,javascript,angularjs,json,Javascript,Angularjs,Json,我是AngularJS的新手，我有以下代码，我想根据用户输入动态过滤我正在显示的列表，有点像google，我可以加载数据并显示在表上，但由于某些奇怪的原因，过滤功能不起作用。感谢您的帮助 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/angular.min.js"></script>
<title>IMDB Movies top 100</title>
</head>
<body>
<div class="container-fluid whole wrapper">
<div class="navbar navbar-default row col-xs-12 col-sm-12 col-md-12 col-lg-12 header">
<p class="navbar-brand header-text ">IMDB Top 100 Movies</p>
</div>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><div class="form-group" style="width:500%;">
<input class="form-control" type="text" ng-model="search" placeholder="search..." />
</div></li>
<li class="sidebar-brand btn btn-default btn-custom"><a href="#">Create new entry</a></li>
<li class="sidebar-brand btn btn-default btn-custom"><a href="#">Update Entry</a></li><br>
<li class="sidebar-brand btn btn-default btn-custom"><a href="#">Delete Entry</a></li><br>
</ul>
</div>
<div ng-app="myApp" ng-controller="movieCtrl">
<table class="view table table-bordered table-striped" style="width:80%">
<thead>
<tr>
<th>Title</th>
<th>Rank</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="movie in movies | filter : {'movie.title': search}">
<td>{{movie.title}}</td>
<td>{{movie.rank}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('movieCtrl', function ($scope, $http) {
$http.get("movies.json").then(function (response) {
$scope.movies = response.data;
});
});
</script>
</div>
</body>
应该是这样的。删除
电影ng app=“myApp”ng controller=“movieCtrl”ng model=“search”ng应用程序 <tr ng-repeat="movie in movies | filter : {'title': search}">
标题
等级
{{movie.title}
{{movie.rank}
电影ng app=“myApp”ng controller=“movieCtrl”ng model=“search”ng应用程序 <tr ng-repeat="movie in movies | filter : {'title': search}">
标题
等级
{{movie.title}
{{movie.rank}
<div ng-app='myApp'>
<div ng-app="myApp" ng-controller="movieCtrl">
<input type='text' ng-model='search' placeholder='Search Movie'></input>
<table class="view table table-bordered table-striped" style="width:80%">
<thead>
<tr>
<th>Title</th>
<th>Rank</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="movie in movies | filter : {'title': search}">
<td>{{movie.title}}</td>
<td>{{movie.rank}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div ng-app='myApp'>
<div ng-app="myApp" ng-controller="movieCtrl">
<input type='text' ng-model='search' placeholder='Search Movie'></input>
<table class="view table table-bordered table-striped" style="width:80%">
<thead>
<tr>
<th>Title</th>
<th>Rank</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="movie in movies | filter : {'title': search}">
<td>{{movie.title}}</td>
<td>{{movie.rank}}</td>
</tr>
</tbody>
</table>
</div>
</div>
希望这对您有所帮助，这样就没有办法从单独的json文件加载值了？我的json文件非常大，所以我不想在代码中手动包含整个内容。@eshan是的，您可以使用
$http.get（“localhost:3000/api/data.json”）。然后（function（res）{}）$http.get（“localhost:3000/api/data.json”）。然后（function（res）{}）