Question

我正在使用一个示例向Angular表添加搜索/过滤功能。有这个代码，但不知道是什么：

我有两个控制器。

eventCtrl：已经有效，请允许我从db获取数据。创建$scope.cars并显示在角度表中。我想改变所以也包括过滤功能。
filteredTableCtrl：是示例中使用的那个。在 sample 上工作正常，我尝试将该代码与我的控制器合并也需要进行一些更改，因为它会搜索多个字段。

filteredTableCtrl：

在[ .. ]之间有一些值，不知道那些是什么，我的版本不使用那个sintaxis。
这个版本有$filter我的需要$http从服务器获取数据我如何合并两者？
我搜索"filter"但未找到它，因此不确定添加到过滤器的功能。
$scope.list是原始列表，#scope.query是搜索输入文本模型。那部分我理解
但为什么要评论其他函数$scope.getList()

-

var app5 = angular.module("angular-table-example").controller("filteredTableCtrl", 
               ["$scope", "$filter", function ($scope, $filter) {
    $scope.list = $scope.$parent.personList;
    $scope.filteredList = $scope.list;

    // $scope.getList = function() {
    //   return $filter("filter")($scope.list, $scope.query);
    // }

    $scope.del = function (i) {
        console.log("index: " + i);
        $scope.list.splice(i, 1);
        $scope.updateFilteredList();
    }

    $scope.updateFilteredList = function () {
        $scope.filteredList = $filter("filter")($scope.list, $scope.query);
    };

}])

这是我的代码，已经有效了。已经可以使用$scope.cars来显示表中db的结果。

eventCtrl：

添加$filter
新数据到达后如何调用$scope.updateFilteredList更新列表。
什么是"filter"

-

app5.controller('eventCtrl', function ($scope, $http) {
    // create a dummy object so the table doesnt give js errors
    // dont know if there is a better way to do this.
    $scope.cars = [
        { Car_ID: null, X: null, Y: null, 
          RoadName: null, Azimuth: null, DateTime: null, 
          Adress: null }
    ];

    // want add the filtered list like the other controller
    $scope.filteredList = $scope.cars;

    // but dont have $filter and dont know what is 'filter'
    $scope.updateFilteredList = function () {
        $scope.filteredList = $filter("filter")($scope.cars, $scope.filter_id);
    };

    // this is working fine until i try add the filtered list.
    $http.get('getCars')
       .then(function (res) {
           $scope.cars = res.data;
           // how call the filtered function here?
           $scope.filteredList = $filter("filter")($scope.cars, $scope.filter_id);
       });

});

Answer 1

Angular需要知道你注射了什么，当你缩小你的代码时，像$ scope和$ filter这样的变量会改为＆＃39; a＆＃39;或者＆＃39; b＆＃39;。没有那些[＆＃39; $ scope＆＃39;，＆＃39; ..＆＃39;]，angular就不会知道要注入什么＆＃39; a＆＃39;和＆＃39; b＆＃39;。如果你不缩小，就不需要它。
如果需要，您可以在控制器中注入$ http和$ filter。
$ angular mutate数据中的过滤器。此控制器内的过滤器使用查询中的数据过滤列表。（我不确定你到底想要什么）
确定
因为它没有被使用，可能。

只需在＆＃; $ scope，$ http＆＃39;之后添加$ filter。
您不需要，已过滤的列表在数据到达后已经更新（在＆＃39; .then（功能...＆＃39;）内。如果您想要：

＆＃13;

 $http.get('getCars')
  .then(function (res) {
     $scope.cars = res.data;
     $scope.updateFilteredList();
  });

＆＃13;

过滤器完全相同，根据给定查询过滤值。查看文档here。

Answer 2

我认为第一点是你真正需要解释的。用于依赖的语法是inline array notation，这是一种确保Angular知道你要求的依赖关系的方法，即使你的JS被缩小了。

它采用包含任意数量字符串的数组的形式（每个都是您需要的依赖项的名称），然后是您的控制器函数，它接受参数以匹配依赖项（!!与数组的顺序相同列出他们!!）。

示例：

app5.controller('eventCtrl', ['$scope','$http','$filter', function ($scope, $http, filter) {

    $http.get(/* Do whatever HTTP stuff you want here*/)
        .then(function(results){
            $scope.filteredList = $filter("filter")($scope.list, $scope.query);
            //Or do whatever you want to do with the results
        });

} //End of controller function
] /*End of the dependency array*/)

如何合并两个角度控制器

2 个答案: