Question

来源：https://codepen.io/PageOnline/pen/nCfAj

我是angularJS的新手，我正试图绕过它。

我有一个任务，我需要过滤选择选项菜单并仅显示类别中的项目。我在网上找到了这个（下面），这是一个好的开始。但是，我无法确定如何通过每个选项“catgry”进行过滤。最后我想过滤和显示：＆＃39; title / name＆＃39;，＆＃39; run＆＃39;，＆＃39; swim＆＃39;和别的。只有选定的类别可见。我感谢任何帮助。

<!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>

Answer 1

你走了要弄清楚你应该继续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";
});

AngularJS过滤bu选项/选择

1 个答案: