gpt4 book ai didi

javascript - AngularJS 过滤器不适用于从 JSON 文件加载的数据

转载 作者:行者123 更新时间:2023-11-28 12:18:25 25 4
gpt4 key购买 nike

我是 AngularJS 的新手,我有以下代码,我想根据用户输入动态过滤我显示的列表,有点像谷歌,我可以加载数据并将其显示在表格上,但是过滤器由于某些奇怪的原因,功能无法正常工作。如有任何帮助,我们将不胜感激。

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

我的 JSON 文件采用以下格式,

[
{
"title": "The Shawshank Redemption",
"rank": "1",
"id": "tt0111161"
},
{
"title": "The Godfather",
"rank": "2",
"id": "tt0068646"
}]

最佳答案

应该是这样的。删除电影

您还应该将 ng-app="myApp"ng-controller="movieCtrl" 放在包含所有范围的位置。

在您的示例中,ng-model="search" 超出了 ng-app

 <tr ng-repeat="movie in movies | filter : {'title': search}">

var app = angular.module('myApp', []);
app.controller('movieCtrl', function($scope, $http) {
$scope.movies = [
{
"title": "The Shawshank Redemption",
"rank": "1",
"id": "tt0111161"
},
{
"title": "The Godfather",
"rank": "2",
"id": "tt0068646"
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="movieCtrl">
<input class="form-control" type="text" ng-model="search" placeholder="search..." />
<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>

关于javascript - AngularJS 过滤器不适用于从 JSON 文件加载的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44072406/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com