NG重複過濾

這是我JSON數據：NG重複過濾

[ 
{ 
    "name": "elin", 
    "family": "kinoian" 
}, 
{ 
    "name": "simon", 
    "family": "santos" 
}, 
{ 
    "name": "sara", 
    "family": "pinki" 
}, 
{ 
    "name": "emin", 
    "family": "richard" 
} 
]

正如你所看到的，我在每一行「名」 2鍵和「家庭。這是JSON對象「搜索」我的NG-重複過濾：

<li ng-repeat="membr in familyMember| filter:search"> 
    <span> {{membr.name}} - {{membr.family}}</span> 
</li>

而這些是我對filteri輸入NG：

By name: <input type="text" ng-model="search.name1"> 
and <input type="text" ng-model="search.name2"> 

By family: <input type="text" ng-model="search.family">

我需要它名是「艾琳」和「薩拉」行。我正在尋找「AND條件」進行過濾。我怎樣才能做到這一點？

來源

2016-12-31 kamalon

告訴樣品輸入和輸出輸入 – Sajeetharan

：「eiln」和「薩拉」 - 輸出：其中有「艾琳」和「薩拉」之名演出第1和第3行。 – kamalon

你檢查了我的答案嗎？ –

首先，不，你不是在尋找一個AND條件，而是一個OR。事實上，一個家庭成員不能同時被命名爲「elin」和「sara」。

現在，如果您閱讀filter過濾器的文檔，您會看到它接受一個函數作爲參數，如果該值被接受，則該函數必須返回一個真值，如果該值被拒絕，則返回真值。因此，所有你需要的是

ng-repeat="member in familyMember| filter:isAccepted">

和

$scope.isAccepted = function(member) { 
    return member.name === $scope.search.name1 || member.name === $scope.search.name2; 
}

來源

2016-12-31 13:37:19

您需要使用自定義過濾器或條件。

$scope.nameFilter = function(member) { 
    var result = (member.name == $scope.membr.name1) || 
     (member.name == $scope.membr.name2) || 
     (member.family == $scope.membr.family); 
    return result; 
    };

DEMO

var myApp = angular.module('myApp', []); 
 

 
myApp.controller("MyCtrl", ['$scope', function($scope) { 
 
    $scope.familyMember = [{ 
 
    "name": "elin", 
 
    "family": "kinoian" 
 
    }, { 
 
    "name": "simon", 
 
    "family": "santos" 
 
    }, { 
 
    "name": "sara", 
 
    "family": "pinki" 
 
    }, { 
 
    "name": "emin", 
 
    "family": "richard" 
 
    }]; 
 
    $scope.nameFilter = function(member) { 
 
    var result = (member.name == $scope.membr.name1) || 
 
     (member.name == $scope.membr.name2) || 
 
     (member.family == $scope.membr.family); 
 
    return result; 
 
    }; 
 

 
}]);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-app="myApp" ng-controller="MyCtrl"> 
 
    By name: 
 
    <input type="text" ng-model="membr.name1" > and 
 
    <input type="text" ng-model="membr.name2"> By family: 
 
    <input type="text" ng-model="membr.family"> 
 
    <li ng-repeat="membr in familyMember| filter:nameFilter"> 
 
     <span> {{membr.name}} - {{membr.family}}</span> 
 
    </li> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-12-31 13:46:18 Sajeetharan

它不起作用！ – kamalon

它的工作原理，鍵入名稱，並看到 – Sajeetharan

是的非常感謝你 – kamalon

試試這個工作演示：

var app = angular.module('myApp',[]); 
 

 
app.controller('mainCtrl', function($scope) { 
 
    $scope.familyMember = [ 
 
{ 
 
    "name": "elin", 
 
    "family": "kinoian" 
 
}, 
 
{ 
 
    "name": "simon", 
 
    "family": "santos" 
 
}, 
 
{ 
 
    "name": "sara", 
 
    "family": "pinki" 
 
}, 
 
{ 
 
    "name": "emin", 
 
    "family": "richard" 
 
} 
 
]; 
 

 
$scope.search = function(membr) { 
 
    return membr.name === $scope.search.name1 || membr.name === $scope.search.name2; 
 
} 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app='myApp' ng-controller='mainCtrl'> 
 
name1: <input type="text" ng-model="search.name1"> 
 
name2: <input type="text" ng-model="search.name2"><br><br> 
 
    <li ng-repeat="membr in familyMember | filter:search"> 
 
     <span> {{membr.name}} - {{membr.family}}</span> 
 
    </li> 
 
</div>

來源

2016-12-31 21:13:23

NG重複過濾

回答

相關問題