CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatangular-filters
Brandon lawrence
Brandon lawrence

Reputation: 11

Cant get Angular custom filter to work

So the intent is to show specific words based on their "quarters". Something is wrong with $scope.myFunc because when I try to select a checkbox instead of showing the corrosponding words I get "undefined is not a function". Does anyone know what it could be?

 var app = angular.module("sight", []);

 app.controller('WordController', function($scope){
 	
	$scope.myFunc = function(a) {
        for(catagory in $scope.catagoryArray){
            var c = $scope.catagoryArray[catagory];
            if(c.on && a.quarter.indexOf(c.area) > -1){
                return true;   
            }               
        }
    };

  	$scope.catagoryArray = [{ area: 'colors', on: false}, { area: "numbers", on: false}, { area: "first", on: false}, { area: "second", on: false}, { area: "third", on: false},{ area: "fourth", on: false}];

 	$scope.words = [
 	 {	
 	name: 'Red',
 	sound: "audio/test.mp3",
 	quarter: ['colors']
  },
   {	
 	name: 'White',
 	sound: "audio/test.mp3",
 	quarter: 'colors'
  },
   {	
 	name: 'Blue',
 	sound: "audio/test.mp3",
 	quarter: 'colors'
  },
   {	
 	name: 'Yellow',
 	sound: "audio/test.mp3",
 	quarter: 'colors'
  },
   {	
 	name: 'Black',
 	sound: "audio/test.mp3",
 	quarter: 'colors'
  },
   {	
 	name: 'Green',
 	sound: "audio/test.mp3",
 	quarter: 'colors'
  },
 {	
 	name: 'One',
 	sound: "audio/test.mp3",
 	quarter: 'numbers'
  },
   {
 	name: 'Two',
 	sound: "audio/test.mp3",
 	quarter: 'numbers'
  },
   {
 	name: 'Three',
 	sound: "audio/test.mp3",
 	quarter: 'numbers'
  },
   {
 	name: 'Four',
 	sound: "audio/test.mp3",
 	quarter: 'numbers'
  },
   {
 	name: 'Five',
 	sound: "audio/test.mp3",
 	quarter: 'numbers'
  },
   {
 	name: 'Six',
 	sound: "audio/test.mp3",
 	quarter: 'numbers'
  },
     {
 	
 	name: 'Seven',
 	sound: "audio/test.mp3",
 	quarter: 'numbers'
  },
   {
 	name: 'Eight',
 	sound: "audio/test.mp3",
 	quarter: 'numbers'
  },
     {
 	name: 'Nine',
 	sound: "audio/test.mp3",
 	quarter: 'numbers'
  },
   {
 	name: 'Ten',
 	sound: "audio/test.mp3",
 	quarter: 'numbers'
  },
   {
 	name: 'am',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'and',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'are',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'at',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'can',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
  {
 	name: 'do',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'for',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'go',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'have',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'he',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
    {
 	name: 'here',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'I',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'is',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'it',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'like',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
    {
 	name: 'look',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'me',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'my',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'no',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'play',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'said',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'see',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'she',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'the',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
    {
 	name: 'to',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'up',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'we',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'will',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },
   {
 	name: 'you',
 	sound: "audio/test.mp3",
 	quarter: 'one'
  },   
   {
 	name: 'secondtest',
 	sound: "audio/test.mp3",
 	quarter: 2
  },   
   {
 	name: 'thirdtest',
 	sound: "audio/test.mp3",
 	quarter: 'third'
  },   
   {
 	name: 'will',
 	sound: "audio/test.mp3",
 	quarter: 'fourth'
  }];
   });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <body  ng-app="sight">
  <h4>If you don't want to practice all of the words, please choose the quarter or types you want to practice. You can choose more than one.</h4>
  <div ng-controller="WordController">
<li ng-repeat="area in catagoryArray"> 
  <label>
    <input type="checkbox" ng-model="area.on">{{area.area}}
  </label>{{area.on}}
</li>
  <h1>Words</h1>
  <ul>
    <li ng-repeat="word in words | filter:myFunc">{{word.name}}</li>
  </ul>
  </div>
  </body>

Upvotes: 1

Views: 115

Answers (3)

samir
samir

Reputation: 211

 for (var category in $scope.categoryArray) {
      var c = $scope.categoryArray[category];

      if (c.on && a.quarter instanceof Array &&
        a.quarter.indexOf(c.area) > -1) {
        return true;
      }
      if (c.on && a.quarter == c.area) {
        return true;
      }
    }
    return false;

Plunkr

Upvotes: 0

Pratap Koritala
Pratap Koritala

Reputation: 1637

There is a bug in your code, You are executing a.quarter.indexOf even on numbers,

{
    name: 'secondtest',
    sound: "audio/test.mp3",
    quarter: 2
  }

Please check this Plunker link http://plnkr.co/edit/CniKgrUirgrrryjCrlsq?p=preview

$scope.myFunc = function(a) {

        for(catagory in $scope.catagoryArray){
            var c = $scope.catagoryArray[catagory];

            if(c.on &&  a.quarter instanceof Array &&
                a.quarter.indexOf(c.area) > -1) {
                return true;   
            }
            if(c.on && a.quarter == c.area) {
                return true;   
            }
        }
        return false;
    };

Upvotes: 1

PSL
PSL

Reputation: 123739

Your issue is on this line:

if(c.on && a.quarter.indexOf(c.area) > -1){

It so happens that in your list object there are some objects with property quarter a numeric value, indexOf is a function that exists on a string and array, but not with a number or any other type of data. So just Stringify it if you are planning to search in string.

if(c.on && String(a.quarter).indexOf(c.area) > -1){

Or

  var list = [].concat(a.quarter); //Search in an array
  if (c.on && list.indexOf(c.area) > -1) {
    return true;
  }


var app = angular.module("sight", []);

app.controller('WordController', function($scope) {

  $scope.myFunc = function(a) {
    for (catagory in $scope.catagoryArray) {
      var c = $scope.catagoryArray[catagory];
      var list = [].concat(a.quarter);
      if (c.on && list.indexOf(c.area) > -1) {
        return true;
      }
    }
  };

  $scope.catagoryArray = [{
    area: 'colors',
    on: false
  }, {
    area: "numbers",
    on: false
  }, {
    area: "first",
    on: false
  }, {
    area: "second",
    on: false
  }, {
    area: "third",
    on: false
  }, {
    area: "fourth",
    on: false
  }];

  $scope.words = [{
    name: 'Red',
    sound: "audio/test.mp3",
    quarter: ['colors']
  }, {
    name: 'White',
    sound: "audio/test.mp3",
    quarter: 'colors'
  }, {
    name: 'Blue',
    sound: "audio/test.mp3",
    quarter: 'colors'
  }, {
    name: 'Yellow',
    sound: "audio/test.mp3",
    quarter: 'colors'
  }, {
    name: 'Black',
    sound: "audio/test.mp3",
    quarter: 'colors'
  }, {
    name: 'Green',
    sound: "audio/test.mp3",
    quarter: 'colors'
  }, {
    name: 'One',
    sound: "audio/test.mp3",
    quarter: 'numbers'
  }, {
    name: 'Two',
    sound: "audio/test.mp3",
    quarter: 'numbers'
  }, {
    name: 'Three',
    sound: "audio/test.mp3",
    quarter: 'numbers'
  }, {
    name: 'Four',
    sound: "audio/test.mp3",
    quarter: 'numbers'
  }, {
    name: 'Five',
    sound: "audio/test.mp3",
    quarter: 'numbers'
  }, {
    name: 'Six',
    sound: "audio/test.mp3",
    quarter: 'numbers'
  }, {

    name: 'Seven',
    sound: "audio/test.mp3",
    quarter: 'numbers'
  }, {
    name: 'Eight',
    sound: "audio/test.mp3",
    quarter: 'numbers'
  }, {
    name: 'Nine',
    sound: "audio/test.mp3",
    quarter: 'numbers'
  }, {
    name: 'Ten',
    sound: "audio/test.mp3",
    quarter: 'numbers'
  }, {
    name: 'am',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'and',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'are',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'at',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'can',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'do',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'for',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'go',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'have',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'he',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'here',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'I',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'is',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'it',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'like',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'look',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'me',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'my',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'no',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'play',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'said',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'see',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'she',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'the',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'to',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'up',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'we',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'will',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'you',
    sound: "audio/test.mp3",
    quarter: 'one'
  }, {
    name: 'secondtest',
    sound: "audio/test.mp3",
    quarter: 2
  }, {
    name: 'thirdtest',
    sound: "audio/test.mp3",
    quarter: 'third'
  }, {
    name: 'will',
    sound: "audio/test.mp3",
    quarter: 'fourth'
  }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="sight">
  <h4>If you don't want to practice all of the words, please choose the quarter or types you want to practice. You can choose more than one.</h4>
  <div ng-controller="WordController">
    <li ng-repeat="area in catagoryArray">
      <label>
        <input type="checkbox" ng-model="area.on">{{area.area}}
      </label>{{area.on}}
    </li>
    <h1>Words</h1>
    <ul>
      <li ng-repeat="word in words | filter:myFunc">{{word.name}}</li>
    </ul>
  </div>
</body>

Upvotes: 0

Related Questions