Angularjsは別のスコープにあるスコープからアイテムを削除します

Question

以下は、私が角サイトのデータを使用しているモックアップです。目標は、すでにscope1（デバイス）に存在するscope2（newdevices）内のアイテムをすべて削除することです。私は実用的なモデルを持っているが、それが最良の方法だとは思わない。

私は2つの異なるソースからデータを取得するコントローラを持っています。簡単にするために、私は最初のスコープを静的にしましたが、2番目のスコープは、角サイトからの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のリピートコール：

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

述べたように、これは現在動作しますが、私はすでに機能から2番目のスコープ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を参照。