来源:https://codepen.io/PageOnline/pen/nCfAj
我是 angularJS 的新手，正在尝试了解它。
我有一个任务，需要过滤选择选项菜单并仅显示类别中的项目。我在网上找到了这个(如下)，这是一个好的开始。但是我不知道如何让它按每个选项“catgry”进行过滤。最终我想按“标题/名称”、“运行”、“游泳”等进行过滤和显示。仅显示所选类别。我感谢任何帮助。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Anjular Filtered List</title>
<script src="js/angular.min.js"></script>
<style>
img{
width:300px;
height:auto;
}
</style>
</head>
<body>
<div id="notebooks" ng-app="notebooks" ng-controller="NotebookListCtrl">
<input type="text" id="query" ng-model="query">
<select ng-model="orderList">
<option value="title">By title</option>
<option value="-catgry">Swim</option>
<option value="catgry">Other</option>
</select>
<ul id="notebook_ul">
<li ng-repeat="notebook in notebooks | filter:query | orderBy: orderList">
<h3>{{notebook.title}}</h3>
<img src="{{notebook.featimg}}" alt="">
<p>{{notebook.ctent}}</p>
<div class="right top">{{notebook.catgry}}</div>
</li>
</ul>
<span>Number of Articles: {{notebooks.length}}</span>
</div>
<script>
var notebooks = angular.module('notebooks', []);
notebooks.controller('NotebookListCtrl', function($scope) {
$scope.notebooks = [
{"title": "Making sure you are ready like the Gold Coast for the Commonwealth Games",
"featimg": "images/image2.jpg",
"ctent": "Article intro ang links will be entered into this section.",
"catgry": "swim"},
{"title": "Looking after us on our beaches",
"featimg": "images/image1.jpg",
"ctent": "Article intro ang links will be entered into this section.",
"catgry": "run"},
{"title": "Running is Beautiful",
"featimg": "images/image3.jpg",
"ctent": "Article intro ang links will be entered into this section.",
"catgry": "other"},
{"title": "What swimming stroke is this?",
"featimg": "images/image4.jpg",
"ctent": "Article intro ang links will be entered into this section.",
"catgry": "swim"},
{"title": "Team Dynamics",
"featimg": "images/image5.jpg",
"ctent": "Article intro ang links will be entered into this section.",
"catgry": "other"},
{"title": "Why Quidditch?",
"featimg": "images/image6.jpg",
"ctent": "Article intro ang links will be entered into this section.",
"catgry": "run"}
];
$scope.orderList = "title";
});
</script>
</body>
</html>
最佳答案
给你
只要弄清楚你应该继续使用 ng-show、ng-hide
了解更多信息ben nadel
正在工作plnkr
HTML
<div id="notebooks" ng-app="notebooks" ng-controller="NotebookListCtrl">
<select ng-model="orderList">
<option value="title">Title</option>
<option value="swim">Swim</option>
<option value="run">Run</option>
<option value="other">Other</option>
</select>
{{orderList}}
<ul id="notebook_ul">
<li ng-repeat="notebook in notebooks"
ng-show="notebook.catgry === orderList">
<h3>{{notebook.title}} + {{notebook.catgry}}</h3>
<img src="{{notebook.featimg}}" alt="">
<p>{{notebook.ctent}}</p>
<div class="right top">{{notebook.catgry}}</div>
</li>
</ul>
<span>Number of Articles: {{notebooks.length}}</span>
</div>
JS
var notebooks = angular.module('notebooks', []);
notebooks.controller('NotebookListCtrl', function($scope) {
$scope.notebooks = [
{"title": "Making sure you are ready like the Gold Coast for the Commonwealth Games",
"featimg": "images/image2.jpg",
"ctent": "Article intro ang links will be entered into this section.",
"catgry": "swim"},
{"title": "Looking after us on our beaches",
"featimg": "images/image1.jpg",
"ctent": "Article intro ang links will be entered into this section.",
"catgry": "run"},
{"title": "Running is Beautiful",
"featimg": "images/image3.jpg",
"ctent": "Article intro ang links will be entered into this section.",
"catgry": "other"},
{"title": "What swimming stroke is this?",
"featimg": "images/image4.jpg",
"ctent": "Article intro ang links will be entered into this section.",
"catgry": "swim"},
{"title": "Team Dynamics",
"featimg": "images/image5.jpg",
"ctent": "Article intro ang links will be entered into this section.",
"catgry": "title"},
{"title": "Why Quidditch?",
"featimg": "images/image6.jpg",
"ctent": "Article intro ang links will be entered into this section.",
"catgry": "run"}
];
$scope.orderList = "title";
});
关于javascript - AngularJS 按选项/选择过滤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40394397/