Question

我试图在指令中使用AngularJS本机过滤器过滤动态表。

这是index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Formation AngularJS</title>
</head>
<body ng-app="formation">

    <formation-table ng-init="nogData=[{id: 0, firstname:'Pierre', age: 31}, {id: 1, firstname:'Jean', age:10}, {id: 2, firstname:'Marie', age:5}]" headers="[{slug: 'id', name: 'ID'}, {slug: 'firstname', name: 'Firstname'}, {slug: 'age', name:'Age'}]" title="Mon tableau" nog="nogData" ></formation-table>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

    <script src="app/03_app.js"></script>
</body>
</html>

这是我的directiv

的模板

{{title}}
<table>
    <tr>
        <th ng-repeat="header in headers">
            <a href="" ng-click="order(header.slug)">{{header.name}}</a><br/>
            <input type="text" ng-model="filtre.id">
        </th>
    </tr>
    <tr ng-repeat="row in nog | filter:filtre">
        <td ng-repeat="header in headers">{{row[header.slug]}}</td>
    </tr>
</table>

这是我的app.js：

var app = angular.module('formation', []);

app.directive('formationTable', function(){

var tableCtrl = ['$scope', "$filter", function($scope, $filter){
    $scope.order = function(name){
        var orderBy = $filter('orderBy');

        $scope.predicate = name;

        if($scope.predicate === name){
            $scope.reverse = !$scope.reverse;
        }
        else {
            $scope.reverse = false;
        }
        $scope.nog = orderBy($scope.nog, name, $scope.reverse);
    };
}];

return {
    scope: {
        headers : '=',
        title : '@title',
        nog : '=',
    },
    templateUrl : './templates/formationTable.html',
    controller: tableCtrl,
}

}）

实际上，它根本不起作用（无论我输入的内容是什么都没有改变）。

感谢您的帮助。

使用AngularJS过滤动态表

0 个答案: