2016-06-09 37 views
1

我使用的是NG重複指令與過濾器像這樣到控制器:如何通過NG-重複值

<div ng-repeat="person in data"> 
</div 

即顯示{{data.length}}人。 (我期望將長度值傳遞給控制器​​)​​

但我需要將過濾後的長度值傳遞給控制器​​,因爲我根據過濾後的長度值執行相同的邏輯。

回答

2

1.Method 1

ng-repeat="item in filtered = (data | filter:filterExpr)" 

將創建過濾列表。

filtered.length將顯示過濾的長度。

2.Method 2

使用$watch用於檢測所述過濾的長度。

$scope.length = $scope.data.length; 
$scope.$watch("search", function(query) { 
    $scope.length = $filter("filter")($scope.data, query).length; 
}); 

var app = angular.module('angularjs-starter', []) 
 

 
app.controller('MainCtrl', function($scope, $filter) { 
 
    $scope.data = [{ 
 
    "name": "Martin", 
 
    "age": 21 
 
    }, { 
 
    "name": "Peter", 
 
    "age": 26 
 
    }, { 
 
    "name": "Arun", 
 
    "age": 25 
 
    }, { 
 
    "name": "Maxwell", 
 
    "age": 22 
 
    }]; 
 

 
    $scope.counted = $scope.data.length; 
 
    $scope.$watch("search", function(query) { 
 
    $scope.filteredData = $filter("filter")($scope.data, query); 
 
    }); 
 

 
});
<html ng-app="angularjs-starter"> 
 

 
<head lang="en"> 
 
    <meta charset="utf-8"> 
 
    <title>Demo</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <input ng-model="search" type="text"> 
 
    <br>Showing {{data.length}} Persons; 
 
    <br>Filtered {{filteredData.length}} 
 
    <ul> 
 
    <li ng-repeat="person in filteredData"> 
 
     {{person.name}} 
 
    </li> 
 
    </ul> 
 

 
</body> 
 
<script> 
 
</script> 
 

 
</html>

+0

它可以捕獲長度值,而無需使用濾波器查詢? – CodeMan

+0

方法1呢? – Muhsin

+0

但我需要在控制器中獲得長度值。 – CodeMan