Question

我遇到问题，找出过滤器未定义的原因......

未捕获的ReferenceError：未定义过滤器（匿名函数）@ mainController.js：46（匿名函数）@mainController.js：76

我错过了什么？

指数=

<!DOCTYPE html>
<html ng-app="app" ng-open="main.refreshData()">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="Content/site.css">
    <!--<link data-require="ui-grid@*" data-semver="3.0.0RC18" rel="stylesheet" type="text/css" href="Content/ui-grid.css">-->
    <link data-require="ui-grid@*" data-semver="3.0.0RC18" rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" />
    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script src="Application/app.module.js"></script>
    <script src="Application/mainController.js"></script>
    <script src="Scripts/ui-grid.min.js"></script>
</head>
<body ng-controller="MainController as main">

    <input type="text" ng-model="main.food" placeholder="Enter food" />

    <p>Sriracha sauce is great with {{main.food}}!</p>
    <br />
    <br />
    <input type="text" ng-model="main.filterText" ng-change="refreshData()" placeholder="Search..." />
    <br />
    <br />
    <h>{{main.title}}</h>
    <div class="grid" ui-grid='main.gridOptions' id="grid1"></div>

</body>
</html>

app =

//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', []);

})();

Controller =

(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;
        }
    });

})();

Answer 1

将过滤器翻译为功能并将其绑定到应用程序。

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

function visibleColumns () {...}

没有函数filter()，有angular.module对象的方法调用了filter('name', function() { ... })。

More about custom filters

AngularJS和＆＃39; Controller as＆＃39; ui-grid的语法

1 个答案: