Question

我是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"
}]

Answer 1

应该是这样的。删除movie

您还应该将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>

Answer 2

Jsfiddle

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

    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"
        }]
        //});
    });

希望这会对你有所帮助

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

2 个答案: