Question

我一直在研究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;


});

Answer 1

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

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

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

1 个答案: