javascript - 无法让 Angular 自定义过滤器工作

Question

因此，目的是根据他们的“季度”显示特定的单词。 $scope.myFunc 出了问题，因为当我尝试选择一个复选框而不是显示相应的单词时，我得到“未定义不是函数”。有谁知道这可能是什么？

 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>

Answer 1

您的代码中有一个错误， 您甚至在数字上执行 a.quarter.indexOf，

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

请检查此 Plunker 链接 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;
    };