How to setup ng-repeat filter?

F

FreeAero2015-06-20 14:32:30

Angular

FreeAero, 2015-06-20 14:32:30

Hello, I recently started learning AngularJs, and I can’t solve one problem , when you click on the checkmark, a filter is produced, and if you uncheck it, then everything disappears, and the filter should return back.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

C

copal, 2015-06-20
@copal

Is that how it's needed?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
  <style type="text/css">
    body {
      background-color: #232323;
    }
  </style>
  <script type="text/javascript">
    var app = angular.module('CheckBoxApp', []);

    app.controller('FilterController', ['$scope', function($scope){
      $scope.filters = {id: 2};

      $scope.allFilms = [
        { name: 'title 1', genre: 'horror', date: 2014 },
        { name: 'title 2', genre: 'comedy', date: 2015 },
        { name: 'title 3', genre: 'horror', date: 2014 },
        { name: 'title 4', genre: 'comedy', date: 2014 },
        { name: 'title 5', genre: 'horror', date: 2015 }
      ];

      $scope.checkboxDataForFilter = {
        range: '',
        date: ''
      };

    }]);

  </script>
</head>
<body>
  <div ng-app="CheckBoxApp">
    <div ng-controller="FilterController">

      <label> all:
        <input type="checkbox" ng-model="checkboxDataForFilter.genre" ng-true-value="''"/>
      </label>
      <label> horro: 
        <input type="checkbox" ng-model="checkboxDataForFilter.genre" ng-true-value="'horror'"/>
      </label>
      <label> comedy:
        <input type="checkbox" ng-model="checkboxDataForFilter.genre" ng-true-value="'comedy'"/>
      </label>
      
      <br />

      <label> all:
        <input type="checkbox" ng-model="checkboxDataForFilter.date" ng-true-value="''"/>
      </label>
      <label> 2014: 
        <input type="checkbox" ng-model="checkboxDataForFilter.date" ng-true-value="2014"/>
      </label>
      <label> 2015:
        <input type="checkbox" ng-model="checkboxDataForFilter.date" ng-true-value="2015"/>
      </label>

      <table>
                <tr ng-repeat="item in allFilms | filter: { date: checkboxDataForFilter.date, genre: checkboxDataForFilter.genre }">
                    <td>Name: {{ item.name }},</td>
                    <td>Genre: {{ item.genre }},</td>
                    <td>Release Date: {{ item.date }}</td>
                </tr>
      </table>
    </div>
  </div>
</body>
</html>