2015-04-07 49 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

添加其他过滤器或编写自定义过滤器功能。我会修改我的答案,以便您可以通过两者进行过滤。 –