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

Question

I am new to AngularJS, I have the following code, I want to dynamically filter a list I am showing based on user input, sort of like google, I can load the data and display it on the table, but the filter function for some weird reason does not work. 我是AngularJS的新手，我有以下代码，我想根据用户输入动态过滤显示的列表，类似于google，我可以加载数据并将其显示在表上，但是某些函数的过滤功能奇怪的原因不起作用。 Any help is appreciated. 任何帮助表示赞赏。

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

My JSON file is of the following format, 我的JSON文件具有以下格式，

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

Answer 1

It should be like this. 应该是这样 remove movie 删除movie

also you should put ng-app="myApp" and ng-controller="movieCtrl" in place that include all scope. 此外，您还应该将ng-app="myApp"和ng-controller="movieCtrl"放在所有范围内。

in your sample the ng-model="search" is out of ng-app 在您的示例中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>

Answer 2

Jsfiddle 杰斯菲德尔

HTML 的HTML

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

Js s

    var app = angular.module('myApp', []);
    app.controller('movieCtrl', function($scope, $http) {
      //$http.get("movies.json").then(function (response) {
      $scope.movies = [{
          "title": "The Shawshank Redemption",
          "rank": "1",
          "id": "tt0111161"
        }, {
          "title": "The Godfather",
          "rank": "2",
          "id": "tt0068646"
        }]
        //});
    });

hope this will help you 希望这个能对您有所帮助

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

问题描述

2 个解决方案

解决方案1
4 已采纳 2017-05-19 14:19:46

解决方案2
2 2017-05-19 14:23:41

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

问题描述

2 个解决方案

解决方案1 4 已采纳 2017-05-19 14:19:46

解决方案2 2 2017-05-19 14:23:41

解决方案1
4 已采纳 2017-05-19 14:19:46

解决方案2
2 2017-05-19 14:23:41