过滤器不起作用 - Angularjs - Filters not working

我一直在研究一些关于angularjs的视频。在尝试将过滤器应用于书签类别列表时，我的主要内容根本无法加载。到目前为止，我还没有实现视图。我希望我的代码暂时没有视图。

过滤器线有问题，就像我去掉周围的大括号一样。书签列表确实显示，但过滤仍然不起作用！

请让我知道需要做的更正是什么？

这是我的INDEX.HTML代码

<!doctype html>
<html ng-app="Eggly">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Eggly</title>
    <link rel="stylesheet" href="assets/css/normalize.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/eggly.css">
    <link rel="stylesheet" href="assets/css/animations.css">
</head>
<body ng-controller='MainCtrl'>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <a href="#"><img class="logo" src="assets/img/eggly-logo.png"></a>
                <ul class="nav nav-sidebar">
                    <li ng-repeat="category in categories">
                        <a href="#" ng-click="setCurrentCategory(category)">{{category.name}}</a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <div ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name}">
                    <button type="button" class="close">&times;</button>
                    <button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span></button>
                    <a href="{{bookmark.url}}" target="_blank">{{bookmark.title}}</a>
                </div>
                <hr/>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script type="text/javascript" src="app/eggly-app.start.js"></script>
</body>

JS FILE

angular.module('Eggly', [

])
.controller('MainCtrl', function($scope){
$scope.categories = [
{"id": 0, "name": "Development"},
{"id": 1, "name": "Design"},
{"id": 2, "name": "Exercise"},
{"id": 3, "name": "Humor"}
];
$scope.bookmarks= [
{"id":0, "title": "AngularJS", "url": "http://angularjs.org", "category": "Development" },
{"id":1, "title": "Egghead.io", "url": "http://angularjs.org", "category": "Development" },
{"id":2, "title": "A List Apart", "url": "http://alistapart.com/", "category": "Design" },
{"id":3, "title": "One Page Love", "url": "http://onepagelove.com/", "category": "Design" },
{"id":4, "title": "MobilityWOD", "url": "http://www.mobilitywod.com/", "category": "Exercise" },
{"id":5, "title": "Robb Wolf", "url": "http://robbwolf.com/", "category": "Exercise" },
{"id":6, "title": "Senor Gif", "url": "http://memebase.cheezburger.com/senorgif", "category": "Humor" },
{"id":7, "title": "Wimp", "url": "http://wimp.com", "category": "Humor" },
{"id":8, "title": "Dump", "url": "http://dump.com", "category": "Humor" }
];
$scope.currentCategory = null;
function setCurrentCategory(category) {
$scope.currentCategory = category;
}
$scope.currentCategory = setCurrentCategory;

});

我必须在您的代码中修复一些错误。

请将.setCurrentCategory()附加到控制器中的$scope（或this）作为Angular实现MVVM架构。$scope是将控制器与视图链接的对象。只要您想通过方法setCurrentCategory与控制器中的数据进行交互，就必须将其分配给$scope
过滤器 - 根据 AngularJS 文档需要表达式 - 而不是大括号

angular.module('Eggly', [])
  .controller('MainCtrl', function($scope) {
    $scope.categories = [{
      "id": 0,
      "name": "Development"
    }, {
      "id": 1,
      "name": "Design"
    }, {
      "id": 2,
      "name": "Exercise"
    }, {
      "id": 3,
      "name": "Humor"
    }];
    $scope.bookmarks = [{
      "id": 0,
      "title": "AngularJS",
      "url": "http://angularjs.org",
      "category": "Development"
    }, {
      "id": 1,
      "title": "Egghead.io",
      "url": "http://angularjs.org",
      "category": "Development"
    }, {
      "id": 2,
      "title": "A List Apart",
      "url": "http://alistapart.com/",
      "category": "Design"
    }, {
      "id": 3,
      "title": "One Page Love",
      "url": "http://onepagelove.com/",
      "category": "Design"
    }, {
      "id": 4,
      "title": "MobilityWOD",
      "url": "http://www.mobilitywod.com/",
      "category": "Exercise"
    }, {
      "id": 5,
      "title": "Robb Wolf",
      "url": "http://robbwolf.com/",
      "category": "Exercise"
    }, {
      "id": 6,
      "title": "Senor Gif",
      "url": "http://memebase.cheezburger.com/senorgif",
      "category": "Humor"
    }, {
      "id": 7,
      "title": "Wimp",
      "url": "http://wimp.com",
      "category": "Humor"
    }, {
      "id": 8,
      "title": "Dump",
      "url": "http://dump.com",
      "category": "Humor"
    }];
    $scope.currentCategory = null;
    function setCurrentCategory(category) {
      $scope.currentCategory = category;
    }
    $scope.setCurrentCategory = setCurrentCategory;
  });

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='Eggly'>
  <div ng-controller='MainCtrl'>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li ng-repeat="category in categories">
              <a href="#" ng-click="setCurrentCategory(category)">{{category.name}}</a>
            </li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <div ng-repeat="bookmark in bookmarks | filter:currentCategory.name">
            <button type="button" class="close">&times;</button>
            <button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span>
            </button>
            <a href="{{bookmark.url}}" target="_blank">{{bookmark.title}}</a>
          </div>
          <hr/>
        </div>
      </div>
    </div>
  </div>
</div>

过滤器不起作用 - Angularjs

相关内容

最新更新

热门标签：