Juan Carlos Oropeza Juan Carlos Oropeza - 4 months ago 32
AngularJS Question

How merge two angular controller

Im working with one example to add search/filter functionality to Angular table. Have this code but not sure what does:

I have two controller.


  • eventCtrl: Is already working, allow me to get the data from db. create
    $scope.cars
    and display in the angular table. I want to change so also include the filter functionality.

  • filteredTableCtrl : is the one used on the example. Is working ok on the sample and I trying to merge that code with my controler also need some changes because will search for multiple field.



filteredTableCtrl :


  1. has some values between
    [ .. ]
    , dont know what are those for, my version doesnt use that sintaxis.

  2. this version has
    $filter
    mine need
    $http
    to get the data from server how I merge both?.

  3. I search for
    "filter"
    but didnt find it, so not sure what functionality add to the filter.

  4. $scope.list
    is the original list and
    #scope.query
    is the search input text model. That part I understand

  5. But why comment the other function
    $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);
};

}])


This is my code and is already working. Already can use
$scope.cars
to show the result from db in the table.

eventCtrl:


  1. What is the sintaxis to add
    $filter

  2. How I call the
    $scope.updateFilteredList
    to update the list after new data arrive.

  3. what is
    "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 needs to know what are you injecting, when you minify your code, the variables like $scope and $filter are changed to 'a' or 'b'. Without those ['$scope', '..'], angular would not know what to inject into 'a' and 'b'. It's not needed if you don't minify.

  2. You can inject both $http and $filter in your controller if needed.

  3. $filter in angular mutate data. Filter inside this controller is filtering the list with the data from the query. (I'm not sure exactly what you want here)

  4. OK

  5. Because it is not being used, probably.


  1. Just add $filter after '$scope, $http'.

  2. You don't need to, the filtered list is already being updated after the data arrived (inside the '.then(function...'). If you want to:

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

  1. Filter does exactly that, filters a value accordingly to a given query. Check the docs here.