Laurence L Laurence L - 1 month ago 15
HTML Question

AngularJS filter bu option/select

Source: https://codepen.io/PageOnline/pen/nCfAj

I am new to angularJS and am trying to get my head around it.

I have a task where I need to filter a select option menu and display only the items in a category. I found this online (below) and it's a good start. However I can't work out how make it filter by each option 'catgry'. Eventually I would like to filter and display by: 'title/name', 'run', 'swim' and other. With only the selected category visible. I appreciate any help.

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

Here you go Just figure out you should go ahead with ng-show, ng-hide for more info ben nadel

working 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";
});
Comments