角度過濾器不工作過濾器不顯示類別值

Question

我正在添加過濾器來顯示類別，但我的setCurrentCategory函數不顯示任何值顯示未定義。我想爲每個人展示類別。我使用ng-click並傳遞我的函數，而不是使用過濾器並傳遞值。

var myapp = angular.module("myapp", []); 
 
myapp.controller("myCtrl", function($scope){ 
 

 
$scope.categories = [ 
 

 
{'id' : 0, 'Name' : 'Manu'}, 
 
{'id' : 1, 'Name' : 'Rajveer'}, 
 
{'id' : 2, 'Name' : 'Heament'}, 
 
{'id' : 3, 'Name' : 'Yogesh'}, 
 
{'id' : 5, 'Name' : 'Sajid'}, 
 

 

 
]; 
 

 
$scope.languages = [ 
 
{'id' : 0, 'title' : 'Angular', 'url' : 'http://angularjs.org', "category": "Manu"}, 
 
{'id' : 0, 'title' : 'Html5', 'url' : 'http://www.html5rocks.com/en/', "category": "Manu"}, 
 
{'id' : 0, 'title' : 'BootStrap', 'url' : 'http://getbootstrap.com/', "category": "Rajveer"}, 
 
{'id' : 0, 'title' : 'Css', 'url' : 'http://www.tutorialspoint.com/css/', "category": "Yogesh"}, 
 
{'id' : 0, 'title' : 'emberjs', 'url' : 'http://emberjs.com/', "category": "Heament"}, 
 
{'id' : 0, 'title' : 'Javascript', 'url' : 'https://www.javascript.com/', "category": "Rajveer"}, 
 
{'id' : 0, 'title' : 'jQuery', 'url' : 'https://jquery.com/', "category": "Yogesh"}, 
 
{'id' : 0, 'title' : 'Photoshop', 'url' : 'http://www.photoshop.com/', "category": "Sajid"}, 
 
{'id' : 0, 'title' : 'Coral Draw', 'url' : 'http://www.coreldraw.com/in/', "category": "Heament"}, 
 
{'id' : 0, 'title' : 'Flash', 'url' : 'https://get.adobe.com/flashplayer/', "category": "Sajid"}, 
 

 
]; 
 

 
$scope.currentCategory = null; 
 

 
function setCurrentCategory(category){ 
 

 
\t $scope.currentCategory = category; 
 
} 
 

 
function isCurrentCategory(category){ 
 

 
\t return $scope.currentCategory !== null && category.name === $scope.currentCategory.name; 
 
} 
 

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

 
});

.left_box{background-color: #909090; padding: 0px;} 
 
.right_box{padding-top: 25px;} 
 
.nav__box{ 
 

 
    padding-top: 25px; 
 
} 
 
.nav__box ul{ padding: 0px; margin: 0px; } 
 
.nav__box ul li {list-style: none; padding: 10px; text-align: center;} 
 
.nav__box ul li a{ 
 
font-size: 16px; 
 
color: black; 
 
text-decoration: none; 
 

 

 
} 
 
.nav__box ul li a:hover{background: } 
 
.language_list { padding: 0px; margin: 0px; } 
 

 
.language_list li{list-style: none; padding: 5px 10px; margin-bottom: 2px; border: solid 1px #ededed} 
 
.language_list li a {text-decoration: none; padding-left: 15px} 
 
.remove{float: right; font-size: 12px; color: red; line-height: 16px;} 
 
.edit{font-size: 12px; color: red; line-height: 16px; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp" class="container-fluid" ng-controller="myCtrl"> 
 
\t <div class="row"> 
 
\t \t <article class="col-md-1 left_box"> 
 
\t \t <a href="" ng-click="setCurrentCategory(null)"><img src="images/logo.png" alt="AngularJs"/></a> 
 

 
\t \t <nav class="nav__box"> 
 
\t \t \t <ul> 
 
\t \t \t <li ng-repeat='categorie in categories'> 
 
\t \t \t <a href="#" ng-click="setCurrentCategory(category)">{{categorie.Name}}</a> 
 
\t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t </ul> 
 

 
\t \t </nav> 
 

 
\t \t </article> 
 
\t \t <article class="col-md-11 right_box"> 
 
\t \t \t 
 
\t \t <ul class="language_list"> 
 
\t \t \t <li ng-repeat= "language in languages | filter:{category:currentCategory.Name}"> 
 
\t \t \t <span>Edit</span> 
 
\t \t \t <a href='{{language.url}}' target="_blank">{{language.title}}</a> 
 
\t \t \t <span class="remove">Close</span> 
 
\t \t \t </li> 
 

 
\t \t </ul> 
 

 

 
\t \t </article> 
 

 
\t </div> 
 

 
</div>

Answer 1

在你的代碼必須使用相同的用於ng-repeat的參考傳遞給Setcurrentcat egory功能。他們必須匹配。

<li ng-repeat='category in categories'> 
     <a href="#" ng-click="setCurrentCategory(category)">{{category.Name}}</a> 
     </li> 

Answer 2

確保您傳遞category對象：

<li ng-repeat='category in categories'> // changed to 'category' 
      <a href="#" ng-click="setCurrentCategory(category)">{{category.Name}}</a> 
      </li> 

Answer 3

<ul> 
<li ng-repeat='categorie in categories'> 
<a href="#" ng-click="setCurrentCategory(category)">{{categorie.Name}} </a>     
</li>   
</ul> 

IU需要通過categorie

<ul> 
<li ng-repeat='categorie in categories'> 
<a href="#" ng-click="setCurrentCategory(categorie)">{{categorie.Name}}</a>      
</li>   
</ul>