如何在Angularjs中创建过滤器?

时间:2015-08-21 21:45:32

标签: javascript angularjs data-binding angularjs-filter

我有这些课程集合:

 [{ id: 1, courseId: 2, text: 'John' },
  { id: 2, courseId: 2, text: 'Willi' },
  { id: 3, courseId: 2, text: 'Inga' },
  { id: 4, courseId: 1, text: 'Jerry' },
  { id: 5, courseId: 1, text: 'Michael' },
  { id: 1, courseId: 3, text: 'John' },
  { id: 2, courseId: 3, text: 'Willi' },
  { id: 3, courseId: 4, text: 'Inga' },
  { id: 4, courseId: 5, text: 'Jerry' },
  { id: 5, courseId: 5, text: 'Michael' }]

我有这一系列的id:

[{"id": 3},{"id": 2},{"id": 1}] 

我需要按id的数组过滤一系列课程(即只显示具有courseId = 3,2,1的文本课程):

ng-repeat="course in courses| customFilter: [{"id": 3},{"id": 2},{"id": 1}]"

我需要在angularJS中创建自定义过滤器,它将按id的数组过滤课程数组。

任何想法如何为此目的实现customFilter?

2 个答案:

答案 0 :(得分:4)

您可以创建自定义(function () { console.log("STARTING..."); var init = function (reason) { $(document).ready(function () { console.log("ready"); }); }; try { Office.initialize = init; if(!window.external.GetContext) { console.log('Not in office context'); init(); } } catch(e) { // when in office context unable to access external console.log(e); } }); ,以便为您提供过滤后的值,过滤器应将元素数组作为过滤器数组。

<强>标记

filter

过滤

ng-repeat="course in courses| customFilter: [{"id": 3},{"id": 2},{"id": 1}]""

答案 1 :(得分:0)

我在angularJs项目中创建了一个过滤器。

我的角度应用程序名称中的

是angularApp。

var app = angular.module('angularApp', []); // This is your main angular app.

现在您要为解码网址创建过滤器。

app.filter('decodeURL', function() {
    return function(text) {
        if(text) {
            return text.split(' ').join('-').toLowerCase().replace(/[^a-z0-9]+/g, '-');
        }
    }
});

以上代码是创建一个过滤器来解码网址。我的过滤器名称是&#39; decodeURL&#39; 。我们将在代码中使用decodeURL作为过滤器 比如你的网址是 -

http://www.example.com/test1 test2 tes3

然后过滤制作这样的网址 -

<强> http://www.example.com/test1-test2-tes3

如何在html中使用此过滤器 -

<a ui-sref="{{business.category[0].categoryName.toLowerCase()}}Detail({id:business.id,title:(business.title | decodeURL)})"></a>

//以上是针对angularjs中的状态路由。

<a href="/coupon/{{coupon.id}}/{{coupon.title | decodeURL}}"
                                       class="btn btn-warning show-btnhome show-button-margin">Show</a>

//上面的网址重定向代码。

Please see in the snapshots

Please see in the snapshots

Please see in the snapshots