Angularjs entfernen Objekte aus dem Bereich, die in einem anderen Bereich sind

Question

Das folgende ist ein Mock-up von dem, was ich Daten aus der eckigen Website verwenden. Das Ziel besteht darin, alle Objekte in Scope2 (neue Geräte) zu entfernen, die bereits in scope1 (Geräten) vorhanden sind. Ich habe ein funktionierendes Modell, aber ich empfinde es nicht als die beste Methode.

Ich habe einen Controller, der Daten aus zwei verschiedenen Quellen zeichnet. Der Einfachheit halber habe ich den ersten Bereich statisch gemacht, während der zweite Daten über httpget von der winkeligen Seite nimmt, und dies wird von einem Knopfklick initiiert. (My prod Code muss eine Schaltfläche verwenden, so dass ich Variablen in dem Aufruf injizieren)

app.controller('customersCtrl', function($scope, $http) { 

//Example static data for scope 1 
$scope.devices = [ 
    {"Name":"Around the Horn","City":"London","Country":"UK"}, 
    {"Name":"B's Beverages","City":"London","Country":"UK"}, 
    {"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"} 
]; 

//scope 2 data from angular example site that is initiated from a button 
$scope.loaddata = function() { 
    $http.get("http://www.w3schools.com/angular/customers_mysql.php") 
    .then(function (response) { 
     $scope.newdevices = response.data.records; 
     }); 
    } 
}); 

ich dann einen Filter haben, dass die Bereiche vergleicht:

app.filter('matcher', function() { 
    return function(newdevices, devices) { 
    var array2Ids = [] 
    angular.forEach(devices, function(value, index) { 
     array2Ids.push(value.Name); 
    }) 
    return newdevices.filter(function(val) { 
    return array2Ids.indexOf(val.Name) === -1; 
    }) 
} 
}); 

Schließlich wende ich den Filter auf meine ng-Wiederholungsruf:

<div ng-app="myApp" ng-controller="customersCtrl"> 
<button ng-click="loaddata()">load me</button> 
    <table> 
    <tr ng-repeat="x in newdevices | matcher: devices"> 
     <td width="300px">{{ x.Name }}</td> 
     <td width="150px">{{ x.City }}</td> 
     <td width="100px">{{ x.Country }}</td> 
    </tr> 
    </table> 
</div> 

wie erwähnt, das zur Zeit funktioniert, aber wie ich schon den zweiten Umfang Aufruf am httpget aus einer Funktion, ist es eine Möglichkeit, die Filter in die Loaddata functi integrieren auf, so geschieht es auf einmal und kann die Notwendigkeit beseitigen, auf der ng-Wiederholungsstufe zu filtern?

Ich bin noch relativ neu und konnte es noch nicht erreichen.

Answer 1

Sie brauchen keinen eckigen "Filter". Filtern Sie die Antwortdaten, bevor sie $ scope.newdevices zugewiesen wird. unter Code wurde getestet, aber Sie bekommen die Idee.

$scope.loaddata = function() { 
$http.get("http://www.w3schools.com/angular/customers_mysql.php") 
.then(function (response) { 
     //do things here, i.e. 
     var array2Ids = []; 
     angular.forEach(devices, function(value, index) { 
     array2Ids.push(value.Name); 
     }); 
     $scope.newdevices = response.data.records.filter(function(val) { 
      return array2Ids.indexOf(val.Name) === -1; 
     }); 
    }); 
} 

Answer 2

Steuerungen und Dienstleistungen können Filter Abrufen der $filter Dienst.

var matcherFn = $filter('matcher'); 

var result = marcherFn(newdevices, devices); 

AngularJS Filter können sowohl in Vorlagen als auch in JavaScript verwendet werden.

Das Beispiel in dem Text & Tabellen:

angular.module('filterExample', []) 
.controller('MainCtrl', function($scope, $filter) { 
    $scope.originalText = 'hello'; 
    $scope.filteredText = $filter('uppercase')($scope.originalText); 
}); 

Weitere Informationen finden Sie AngularJS $filter Service API Reference.