multi dimensional filter angular

multi dimensional filter angular

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl" class="panel panel-default">
     <div class="panel-body">
<h1>Filtering </h1>
 
      <div data-ng-repeat="p in phones" class="form-group">
 <label for="{{ p.make}}">{{ p.make}}</label>
   <input type="checkbox" id="{{ p.make}}" data-ng-model="resultsFilter" value="{{p.make}}" class="pull-left"/>
  </div>
      
    <p><label>SEARCH: </label><input data-ng-model="resultsFilter" type="text"></p>
    <ul>
        <li data-ng-repeat="phone in phones | filter:resultsFilter:multipleChoicesComparator">
            {{phone.make}} {{phone.model}} 
        </li>
    </ul>
        <button ng-click="newcontent()">NEW</button>
</div>
         </div>
<script>
	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');
  </script>

CSS

h1{font-size:1.9rem}

JavaScript

function MyCtrl($scope, $timeout)
{
    $scope.phones = [
        {
            make:'Dental',
            model:'Mirror'
        },
        {
            make:'Oral',
            model:'Brush'
        },
        {
            make:'Facial',
            model:'Botox'
        }
   ];
    
    $scope.newcontent = function(){
      $scope.phones = [
        {
            make:'Molars',
            model:'Mirror'
        },
        {
            make:'K9',
            model:'Brush'
        },
        {
            make:'Ortho',
            model:'tepe'
        }
   ];
    }
    
    $scope.multipleChoicesComparator = function (expected, actualInCompactForm)
    {
            console.log(actualInCompactForm)
        var listActual = actualInCompactForm.split(' ');
        var mustBeIncluded = false;
        angular.forEach(listActual, function (actual)
        {
            if (angular.lowercase(expected).indexOf(angular.lowercase(actual)) !== -1 
)
            {
                mustBeIncluded = true;
            }
        });

        return mustBeIncluded;
    };
}