Question

您好我显示了一些类别，我想在选择特定类别时显示创建书签div，而不是在显示所有类别时显示。

我尝试了以下代码。即使我尝试返回硬编码的＆＃34; true＆＃34;它也隐藏了div。请让我知道我在这里做错了什么！

<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 ng-click="setCurrentCategory(null)"><img class="logo" src="assets/img/eggly-logo.png"></a>
                <ul class="nav nav-sidebar">
                    <li ng-repeat="category in categories" ng-class="{'active':isCurrentCategory(category)}">
                        <a 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>
                <!--CREATING -->
                <div ng-if="shouldShowCreating()">
                    <button type="button" class="btn btn-link">
                    <span class="glyphicon glyphicon-plus"></span>
                    Create Bookmark
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="http://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 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>

    <script src="app/eggly-app.start.js"></script>
</body>

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;
    $scope.isCreating = false;
    $scope.isEditing  = false;

    function isCurrentCategory(category) {
        return $scope.currentCategory !== null && category.name === $scope.currentCategory.name;
    }

    function setCurrentCategory(category) {
        $scope.currentCategory = category;
    }

    $scope.isCurrentCategory = isCurrentCategory;
    $scope.setCurrentCategory = setCurrentCategory;



      function shouldShowCreating() {
      // return $scope.currentCategory && !$scope.isEditing;
      return true;
  }

})

Answer 1

方法shouldShowCreating是＆＃34;私有＆＃34;您的控制器的方法，而不是$ scope的一部分。要从模板访问该方法，您需要将其更改为：

$scope.shouldShowCreating = function() {
    return $scope.currentCategory && !$scope.isEditing;
}

显示有关选择特定类别的内容

1 个答案: