不能让角定制过滤器工作 [英] Cant get Angular custom filter to work
本文介绍了不能让角定制过滤器工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以，目的是展示基于他们的宿舍特定的单词。什么是错用$ scope.myFunc因为当我尽量选择而不是显示corrosponding话，我得到了一个复选框不确定是不是一个功能。有谁知道这可能是什么？
\r
\r\r
\r VAR应用= angular.module（视线，[]）;\r
\r
app.controller（'WordController'，函数（$范围）{\r
\r
$ scope.myFunc =函数（）{\r
为（在$ scope.catagoryArray产品类别）{\r
变种C = $ scope.catagoryArray [产品类别]\r
如果（c.on＆安培;＆安培; a.quarter.indexOf（c.area）-1个）{\r
返回true;\r
}\r
}\r
};\r
\r
$ scope.catagoryArray = {区：颜色，于：假}，{区：数字上：假}，{区：第一次，于：假}，{区：秒，在：假}，{区：第三，于：假}，{区：四，于：假}];\r
\r
$ scope.words = [\r
{\r
名称：'红'，\r
声音：音频/请将test.mp3\r
季：['颜色']\r
}，\r
{\r
名称：'白'，\r
声音：音频/请将test.mp3\r
季：颜色\r
}，\r
{\r
名称：'蓝'，\r
声音：音频/请将test.mp3\r
季：颜色\r
}，\r
{\r
名称：'黄'，\r
声音：音频/请将test.mp3\r
季：颜色\r
}，\r
{\r
名称：'黑'，\r
声音：音频/请将test.mp3\r
季：颜色\r
}，\r
{\r
名称：绿色，\r
声音：音频/请将test.mp3\r
季：颜色\r
}，\r
{\r
名称：'一'，\r
声音：音频/请将test.mp3\r
季：数字\r
}，\r
{\r
名称：'二'，\r
声音：音频/请将test.mp3\r
季：数字\r
}，\r
{\r
名称：'三'，\r
声音：音频/请将test.mp3\r
季：数字\r
}，\r
{\r
名称：'四'，\r
声音：音频/请将test.mp3\r
季：数字\r
}，\r
{\r
名称：十二五，\r
声音：音频/请将test.mp3\r
季：数字\r
}，\r
{\r
名称：'六'，\r
声音：音频/请将test.mp3\r
季：数字\r
}，\r
{\r
\r
名称：'七'，\r
声音：音频/请将test.mp3\r
季：数字\r
}，\r
{\r
名称：'八'，\r
声音：音频/请将test.mp3\r
季：数字\r
}，\r
{\r
名称：'九'，\r
声音：音频/请将test.mp3\r
季：数字\r
}，\r
{\r
名称：'十'，\r
声音：音频/请将test.mp3\r
季：数字\r
}，\r
{\r
名称：AM，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'和'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'是'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'为'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'能'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'做'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'对'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：走出去，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'有'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'他'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'这里'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'我'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
\t名字是'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'它'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'像'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'看'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'我'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'我'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'不'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'玩'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'说'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'看'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'她'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'了，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'到'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'起来'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'我们'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'意志'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'你'，\r
声音：音频/请将test.mp3\r
季：一\r
}，\r
{\r
名称：'secondtest'，\r
声音：音频/请将test.mp3\r
季：2\r
}，\r
{\r
名称：'thirdtest'，\r
声音：音频/请将test.mp3\r
季：第三\r
}，\r
{\r
名称：'意志'，\r
声音：音频/请将test.mp3\r
季：'第四'\r
}];\r
}）; \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT;机身NG-应用=视线＆GT;\r
＆LT; H4＆GT;如果你不想练的所有的话，请选择您想要练习季度或类型。您可以选择一个以上的LT; / H4＆GT;\r
＆LT; DIV NG控制器=WordController＆GT;\r
＆LT;李NG重复=区域catagoryArray＆GT;\r
＆LT;标签＆gt;\r
＆LT;输入类型=复选框NG模型=area.on＆GT; {{area.area}}\r
＆LT; /标签＆gt; {{area.on}}\r
＆LT; /李＆GT;\r
＆LT; H1＆GT;单词LT; / H1＆GT;\r
＆LT; UL＆GT;\r
＆LT;李NG重复=词话|过滤器：myFunc的＆GT; {{word.name}}＆LT; /李＆GT;\r
＆LT; / UL＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; /身体GT; \r
解决方案
有在你的code错误，
您甚至数执行a.quarter.indexOf，
{
名称：'secondtest'，
声音：音频/请将test.mp3
季：2
}
请检查此Plunker链接 http://plnkr.co/edit/CniKgrUirgrrryjCrlsq？ p = preVIEW
$ scope.myFunc =函数（）{ 为（在$ scope.catagoryArray产品类别）{
变种C = $ scope.catagoryArray [产品类别] 如果（c.on＆安培;＆安培; a.quarter的instanceof阵列和放大器;＆安培;
a.quarter.indexOf（c.area）GT; -1）{
返回true;
}
如果（c.on＆安培;＆安培; a.quarter == c.area）{
返回true;
}
}
返回false;
};
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>
解决方案
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;
};
这篇关于不能让角定制过滤器工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
