2015-04-07 47 views
2

我有一個窗體顯示狀態和縣的下拉選擇框,它工作的一切正常,除非我選擇一個數字的狀態,比如數字「1」,過濾器將包括其他狀態其中也有數字「1」。我需要過濾完全或「真實」,但不知道代碼應該如何查找,我仍然在學習Angular。Angularjs過濾器的確切數字

這裏是我的javascript:

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

app.controller('myController', function($scope) { 
    $scope.projects = [{ 
name: 'First thing', 
state: 'CA', 
stateID: '1', 
county: 'Orange', 
countyID: '191' 
}, { 
name: 'Another Thing', 
state: 'CA', 
stateID: '1', 
county: 'LosAngeles', 
countyID: '190' 
}, { 
name: 'In California', 
state: 'CA', 
stateID: '1', 
county: 'Orange', 
countyID: '191' 
}, { 
name: 'Hey Arizona!', 
state: 'Arizona', 
stateID: '13', 
county: 'Multiple Counties', 
countyID: '3178' 
},{ 
name: 'hello Utah', 
state: 'Utah', 
stateID: '14', 
county: 'Utah County', 
countyID: '200' 
}]; 

$scope.st_option = [{ 
state: "California", 
stateID: "1" 
}, { 
state: "Arizona", 
stateID: "13" 
},{ 
state: "Utah", 
stateID: "14" 
}]; 

$scope.co_option = [{ 
county: "Orange", 
countyID: "191", 
co_state_id: "1" 
}, { 
county: "Multiple Counties", 
countyID: "3178", 
co_state_id: "13" 
}, { 
county: "Sonoma", 
countyID: "218", 
co_state_id: "1" 
}, { 
county: "Los Angeles", 
countyID: "190", 
co_state_id: "1" 
}, { 
county: "Utah County", 
countyID: "200", 
co_state_id: "14" 
}]; 

$scope.filter = {}; 
$scope.clearFilter = function() { 
$scope.filter = {}; 
}; 
}); 

和視圖:

<div ng-app='app' ng-controller='myController'> 
<h3>Records: {{(projects|filter:filter).length}} of {{projects.length}}</h3> 
<p><input type="text" name="generalSearch" placeholder="Search Project Title" ng-model="filter.name"></p> 
<p><select ng-model="filter.stateID" 
     ng-options="item.stateID as item.state for item in st_option"></select> 
<select ng-model="filter.countyID" 
     ng-options="item.countyID as item.county for item in co_option | filter:{ co_state_id : filter.stateID }"> 
    </select></p> 

<p><a href="" id="clear-filter" ng-click="clearFilter()">Reset Filters</a></p> 

<div ng-repeat="project in projects | filter:filter"> 
<div> 
    <br>Name: {{ project.name }} 
    <br>State: {{project.state}} 
    <br>County: {{project.county}} 
    <br> 
    <span ng-hide="{{project.stateID}} "></span> 
    <span ng-hide="{{project.countyID}} "></span> 
</div> 
</div> 
</div> 

而且小提琴:

https://jsfiddle.net/webmastersean/4m2d5n8u/

回答

2

設置你的filter爲true的最後一個參數,請參閱comparator parameter

<div ng-repeat="project in projects | filter:filter:true"> 

編輯以允許多個過濾器:

<input type="text" name="generalSearch" placeholder="Search Project Title" ng-model="filter2.name"> 

<div ng-repeat="project in projects | filter:filter:true | filter:filter2"> 
+0

是的,我認爲這會是答案太多,但它打破了一般的搜索,因爲用戶無法啓動在字符串輸入過濾下來的結果....所以我想我應該在我的問題更具體 - 我需要按狀態精確過濾,但不完全由第一個搜索字段。 –

+0

添加其他過濾器或編寫自定義過濾器功能。我會修改我的答案,以便您可以通過兩者進行過濾。 –