无法使用Angular自定义过滤器

时间：2015-01-06 03:44:01

标签： javascript angularjs angularjs-ng-repeat angular-filters

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

＆＃13;
＆＃13; 
 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'
  }];
   });
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：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;
    };

答案 1 :(得分：0)

您的问题就在这一行：

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

恰好在列表对象中有一些对象具有属性quarter和numeric value，indexOf是一个存在于字符串和数组中的函数，但不是一个数字或任何其他类型的数据。如果您打算在字符串中搜索，那么只需Stringify。

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

或者

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

＆＃13;
＆＃13; 
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'
  }];
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

 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

相关问题
最新问题