Javascript AngularJS和'；控制器组件'；ui网格的语法

我在查找筛选器未定义的原因时遇到问题

未捕获引用错误：未定义筛选器（匿名函数）@mainController.js:46（匿名函数）@mainController.js:76

我错过了什么

索引=

Sriracha沙司与{{main.food}搭配非常棒









{{main.title}

应用=

//The app.module.js file houses a single application-level module for your application. 
//In this example, your application has an application-level module that loads the 
//other modules of the application. The purpose of adding app.module.js as a separate 
//file is to introduce the concept that modules, controllers, services, directives, 
//views, etc. should be defined in their own files.


//<<Immediately-invoked function expression>>
//Immediately-invoked function expressions can be used to avoid variable hoisting from 
//within blocks, protect against polluting the global environment and simultaneously 
//allow public access to methods while retaining privacy for variables defined within the function.
(function () {
    'use strict';

    angular.module('app', []);

})();

//app.module.js文件为您的应用程序包含一个应用程序级模块。
//在本例中，应用程序有一个应用程序级模块，用于加载
//应用程序的其他模块。添加app.module.js作为单独
//文件介绍了模块、控制器、服务、指令、，
//视图等应在其自己的文件中定义。
//
//可以使用立即调用的函数表达式来避免变量从
//在区块内，防止污染全球环境，同时
//允许公开访问方法，同时保留函数中定义的变量的隐私。
（功能（）{
"严格使用",；
角度模块（'app'，[]）；
})();

控制器=

(function () {
    'use strict';

    angular
        .module('app', ['ui.grid'])
        .controller('MainController', main);


    function main() {

        var self = this;
        self.food = 'pizza';

        self.myData = [{
            name: "Moroni",
            age: 50
        }, {
            name: "Tiancum",
            age: 43
        }, {
            name: "Jacob",
            age: 27
        }, {
            name: "Nephi",
            age: 29
        }, {
            name: "Enos",
            age: 34
        }];

        self.gridOptions = {
            data: "main.myData",
            enableGridMenu: true
        };

        self.title = "ng-grid Example";

        self.filterText;

        self.refreshData = function () {
            self.gridOptions.data = self.filter('filter')(self.myData, self.filterText, undefined);
        };
    }

    //Define a custom filter to search only visible columns (used with grid 3)
    filter('visibleColumns', function () {
        return function (data, grid, query) {

            matches = [];

            //no filter defined so bail
            if (query === undefined || query === '') {
                return data;
            }

            query = query.toLowerCase();

            //loop through data items and visible fields searching for match
            for (var i = 0; i < data.length; i++) {
                for (var j = 0; j < grid.columnDefs.length; j++) {

                    var dataItem = data[i];
                    var fieldName = grid.columnDefs[j]['field'];

                    //as soon as search term is found, add to match and move to next dataItem
                    if (dataItem[fieldName].toString().toLowerCase().indexOf(query) > -1) {
                        matches.push(dataItem);
                        break;
                    }
                }
            }
            return matches;
        }
    });

})();

（函数（）{
"严格使用",；
有棱角的
.module（'app'，['ui.grid']））
.控制器（“主控制器”，主控制器）；
函数main（）{
var self=这个；
自助食品=‘比萨饼’；
self.myData=[{
姓名：“莫罗尼”，
年龄:50
}, {
名称：“天香”，
年龄:43
}, {
姓名：“雅各布”，
年龄:27
}, {
名称：“尼菲”，
年龄:29
}, {
名称：“Enos”，
年龄:34
}];
self.gridOptions={
数据：“main.myData”，
enableGridMenu:true
};
self.title=“ng网格示例”；
self.filterText；
self.refreshData=函数（）{
self.gridOptions.data=self.filter（'filter'）（self.myData，self.filterText，未定义）；
};
}
//定义自定义筛选器以仅搜索可见列（与网格3一起使用）
过滤器（'visibleColumns'，函数（）{
返回函数（数据、网格、查询）{
匹配项=[]；
//没有为此定义过滤器
如果（查询===未定义| |查询===''）{
返回数据；
}
query=query.toLowerCase（）；
//通过数据项和可见字段循环搜索匹配项
对于（变量i=0；i-1）{
匹配。推送（数据项）；
打破
}
}
}
返回比赛；
}
});
})();

将过滤器转换为函数并将其绑定到应用程序

angular
    .module('app', ['ui.grid'])
    .controller('MainController', main)
    .filter('visibleColumns', visibleColumns);

function visibleColumns () {...}

没有函数

filter（）

，有调用

filter（'name'，function（）{…}）

的

angular.module

对象的方法

---

好的，所以我添加了.filter（'visibleColumns'，visibleColumns）；到angular.module，在那里注册是有意义的。但是我现在得到了相同的错误，因为visibleColumns没有被定义查看您的自定义筛选器链接，我不确定是否有任何转换语法…好的，我将筛选器（'visibleColumns'）…更改为函数visibleColumns（）{一个常规函数没有编译错误，但是当文本输入到搜索筛选器框中时不会发生任何事情…更新：我让代码正常工作。需要将数据定义为预期的筛选器，并且需要使用myData调用refreshData时，我建议您移动控制器和筛选器to单独的文件。

angular
    .module('app', ['ui.grid'])
    .controller('MainController', main)
    .filter('visibleColumns', visibleColumns);

function visibleColumns () {...}