AngularJS和'控制器为'ui网格语法

AngularJS and 'Controller as' syntax with ui-grid

本文关键字：网格 格语法 ui AngularJS 控制器      更新时间：2023-09-26

我在查找过滤器未定义的原因时遇到问题。。。

Uncaught 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', []);
})();

控制器=

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

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

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

没有函数filter()，有一个angular.module对象的方法，称为filter('name', function() { ... })。

有关自定义过滤器的更多信息

相关文章：