Question

以下是我使用角度网站数据的模拟。目标是删除scope1（设备）中已存在的scope2（newdevices）中的任何项目。我有一个工作模型，但不觉得这是最好的方法。

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

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

你不需要角度过滤器＆＃34;。只需在将响应数据分配给$ 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

控制器和服务可以使用Website服务检索过滤器。

$filter

AngularJS过滤器可以在模板和JavaScript中使用。

文档中的示例：

var matcherFn = $filter('matcher');

var result = marcherFn(newdevices, devices);

有关详细信息，请参阅AngularJS $filter Service API Reference。

Angularjs从另一个范围

2 个答案: