Question

我试图根据文本框变量提供的过滤器对总分进行求和。我最后附上了我的javascript。有没有人有任何建议在Angular中对多个字段求和？

我正在将这个简单的示例集成到一个更大的列集合中（如10个）。我在考虑使用JSON对象来表示每列的总和，但我不确定如何将所有内容与多列数据集成。

// app.js
var app = angular.module('sortApp', [])

.controller('mainController', function($scope) {
  $scope.sortType     = 'fish'; // set the default sort type
  $scope.sortReverse  = false;  // set the default sort order
  $scope.searchFish   = '';     // set the default search/filter term
  $scope.searchName = '';
  
  // create the list of sushi rolls 
  $scope.sushi = [
    { name: 'Cali Roll', fish: 'Crab', tastiness: 2, score: 3 },
    { name: 'Philly', fish: 'Tuna', tastiness: 4, score: 2 },
    { name: 'Tiger', fish: 'Eel', tastiness: 7, score: 5 },
    { name: 'Rainbow', fish: 'Variety', tastiness: 6: score, 1 }
  ];
  
  $scope.totalRecords = function(searchFish, searchName) {
	  return $scope.sushi.reduce( function( current, record) {
		if( filterSushi( record, searchFish, searchName ) )
		{
			return current + record.tastiness;
		}
		else
		{
			return current;
		}
	  }, 0 );
  };
  
});

function filterSushi( record,searchFish, searchName )
{
	var lowName = null;
	var lowFish = null;
	if( searchName.length > 0 )
	{
		lowName = searchName.toLowerCase();
	}
	if( searchFish.length > 0 )
	{
		lowFish = searchFish.toLowerCase();
	}
    var termInName = true;
    var termInFish = true;
			  
	if( lowName != null )
	{
		termInName = record.name.toLowerCase().indexOf(lowName) > -1;
	}
	if( lowFish != null )
	{
		termInFish = record.fish.toLowerCase().indexOf(lowFish) > -1;
	}
	return !( !termInFish || !termInName );
}

app.filter('myTableFilter', function(){
  // Just add arguments to your HTML separated by :
  // And add them as parameters here, for example:
  // return function(dataArray, searchTerm, argumentTwo, argumentThree) {
  return function(dataArray, fish, name) {
      // If no array is given, exit.
      if (!dataArray) {
          return;
      }
      // If no search term exists, return the array unfiltered.
      //else if (!searchTerm) {
      //    return dataArray;
      //}
      // Otherwise, continue.
      else {
           var lowName = null;
		   var lowFish = null;
			if( name.length > 0 )
			{
				lowName = name.toLowerCase();
			}
			if( fish.length > 0 )
			{
				lowFish = fish.toLowerCase();
			}
           // Return the array and filter it by looking for any occurrences of the search term in each items id or name. 
           return dataArray.filter(function(item){
              var termInName = true;
              var termInFish = true;
			  
			  if( lowName != null )
			  {
				termInName = item.name.toLowerCase().indexOf(lowName) > -1;
			  }
			  if( lowFish != null )
			  {
				termInFish = item.fish.toLowerCase().indexOf(lowFish) > -1;
			  }
              //return termInFish || termInName || termInTastiness;
			  return !( !termInFish || !termInName );
           });
      } 
  }    
});

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular Sort and Filter</title>

    <!-- CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <style>
        body { padding-top:50px; }
    </style>

    <!-- JS -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="app.js"></script>

</head>
<body>
<div class="container" ng-app="sortApp" ng-controller="mainController">
  
  <div class="alert alert-info">
    <p>Sort Type: {{ sortType }}</p>
    <p>Sort Reverse: {{ sortReverse }}</p>
    <p>Search Query: {{ searchFish }}</p>
  </div>
  
  <form>
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-addon"><i class="fa fa-search"></i></div>

        <input type="text" class="form-control" placeholder="Search da Fish" ng-model="searchFish">
        <input type="text" class="form-control" placeholder="Search da Name" ng-model="searchName">

      </div>      
    </div>
  </form>
  
  <table class="table table-bordered table-striped">
    
    <thead>
	<tr>
        <td>
          <a href="#" ng-click="sortType = 'name'">
            Sushi Roll 
            <span ng-show="sortType == 'name'" class="fa fa-caret-down"></span>
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'fish'; sortReverse = !sortReverse">
          <span ng-show="sortType == 'fish'" class="fa fa-caret-down"></span>
          Fish Type 
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'tastiness'">
          <span ng-show="sortType == 'tastiness'" class="fa fa-caret-down"></span>
          Taste Level 
          </a>
        </td>
         <td>
          Score
        </td>
		</tr>
  </thead>
    
    <tbody>
      <tr ng-repeat="roll in sushi| orderBy:sortType:sortReverse | myTableFilter:searchFish:searchName">
        <td>{{ roll.name }}</td>
        <td>{{ roll.fish }}</td>
        <td>{{ roll.tastiness }}</td>
		<td>{{ roll.score}}</td>
      </tr>
	<tr><td></td><td></td><td>total: {{totalRecords(searchFish,searchName);}}</td><td>TotalScore: ??</td></tr>
    </tbody>
    
  </table>
  
</div>
</body>
</html>

Answer 1

在较新版本的角网格中，您可以使用ng-repeat访问as myFilteredArray中已过滤数组的别名。

然后你可以用它来做你的总和

<tr ng-repeat="roll in sushi| filter1 | filter2 | filter3 as filteredFish">

Total: {{totalRecords()}}

控制器中的

 $scope.totalRecords = function() {
    if(!$scope.filteredFish){
        return 0;
    }
    return $scope.filteredFish.reduce( function( current, record) {
        return current + record.tastiness;
    }, 0 );
 };

请注意，所示的版本af angular不支持as

的 DEMO

Angular JS过滤

1 个答案: