Angularjs 从范围中删除另一个范围内的项目

Question

以下是我使用来自 angular 站点的数据的模型。目标是删除范围 1（设备）中已存在的范围 2（新设备）中的任何项目。我有一个工作模型，但我不认为这是最好的方法。

我有一个控制器可以从两个不同的来源提取数据。为简单起见，我将第一个范围设为静态，而第二个范围将通过 httpget 从 angular 站点获取数据，这是通过单击按钮启动的。（我的产品代码需要使用一个按钮，以便我可以将变量注入调用）

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

最后，我将过滤器应用于我的 ng-repeat 调用：

<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 函数中，这样它会同时发生并且可以消除需要在 ng-repeat 阶段过滤？

我对此还比较陌生，还没有能够完成它。

Answer 1

您不需要 angular "filter"。只需在将响应数据分配给 $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。

Angularjs 从范围中删除另一个范围内的项目

Angularjs remove items from scope that are in another scope

scope

compare

http-get

filter

angularjs