Angularjs удаляет элементы из области действия, которые находятся в другом диапазоне

Question

Ниже приведено описание того, что я использую данные с углового сайта. Цель состоит в том, чтобы удалить любые объекты в scope2 (newdevices), которые уже существуют в области 1 (устройства). У меня рабочая модель, но я не считаю ее лучшим методом.

У меня есть контроллер, который извлекает данные из двух разных источников. Для простоты я сделал первую область статической, тогда как вторая возьмет данные через httpget с углового сайта, и это инициируется нажатием кнопки. (Мой прод код должен использовать кнопку, чтобы я мог вводить переменные в вызове)

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

Я тогда фильтр, который сравнивает областей:

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

Наконец, я применить фильтр к моему нг-повтор вызова:

<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> 

Как уже упоминалось, это в настоящее время работает, но как я уже называют второй объем HttpGet из функции, есть способ, которым я могу интегрировать фильтр в LoadData functi на, так что это происходит сразу и может устранить необходимость фильтровать на стадии ng-repeat?

Я до сих пор относительно новичок в этом и еще не смог его выполнить.

Answer 1

Вам не нужен угловой фильтр. Просто отфильтруйте данные ответа, прежде чем он будет назначен для $ scope.newdevices. ниже код был протестирован, но вы получите эту идею.

$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

Контроллеры и услуги могут получить фильтры с помощью $filter службы.

var matcherFn = $filter('matcher'); 

var result = marcherFn(newdevices, devices); 

Фильтры AngularJS могут использоваться как в шаблонах, так и в JavaScript.

Пример в Документах:

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

Для получения дополнительной информации см AngularJS $filter Service API Reference.