如何将ng-repeat值传递给控制器

时间:2022-12-22 21:39:21

I am using an ng-repeat directive with filter like so:

我正在使用带有过滤器的ng-repeat指令,如下所示:

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

i.e Showing {{data.length}} Persons. (I am expect to pass the length value to controller)

即显示{{data.length}}人。 (我希望将长度值传递给控制器​​)

But i need to pass the filtered length value to controller because i do same logic based on the filtered length value.

但我需要将过滤后的长度值传递给控制器​​,因为我根据过滤的长度值执行相同的逻辑。

1 个解决方案

#1


2  

1.Method 1

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

Would create the filtered list.

将创建筛选列表。

filtered.length will show the filtered length.

filtered.length将显示过滤的长度。

2.Method 2

Use $watch for detecting the filtered length.

使用$ watch检测过滤的长度。

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

Example

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>

#1


2  

1.Method 1

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

Would create the filtered list.

将创建筛选列表。

filtered.length will show the filtered length.

filtered.length将显示过滤的长度。

2.Method 2

Use $watch for detecting the filtered length.

使用$ watch检测过滤的长度。

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

Example

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>