在選擇特定類別時顯示內容

嗨我正在顯示一些類別，並且我希望在選擇特定類別時顯示創建書籤格，而不是在顯示所有類別時顯示。在選擇特定類別時顯示內容

我試過下面的代碼，即使我試圖返回硬編碼「真」，它也隱藏了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; 
    } 

})

;

來源

2015-05-29 kushalvm

它在codepen上工作正常，最新的問題是什麼？ –

方法shouldShowCreating是您的控制器的「私有」方法，而不是$範圍的一部分。要從您的模板訪問該方法，您需要將其更改爲：

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

來源

2015-05-29 12:15:18 Numyx

在選擇特定類別時顯示內容

回答

相關問題