我是AngularJS的新手。我可以通过文本框搜索列表,但不能使用复选框。
这是我的HTML代码。
<input id="search_keywords" ng-model="keyword" type="text" value="" placeholder="Keywords" name="search_keywords">
<input id="search_location" ng-model="location" type="text" value="" placeholder="Location" name="search_location">
并使用相同形式的复选框
<input type="checkbox" ng-model="categories[category]" />Full Time</label>
<input type="checkbox" ng-model="categories[category]" />Part Time</label>
<input type="checkbox" ng-model="categories[category]" />Contract</label>
<input type="checkbox" ng-model="categories[category]" />Freelance</label>
<ul class="job-fillter-listings-wr">
<li class="job-list" ng-repeat="x in searchData | filter : {'keyword' : keyword, 'location' : location, 'categories' : categories } ">
<a href="">
<div class="center-wr">
<div class="all-job-list clearfix">
<div class="job-title-section">
<span class="job-title-"><i class="fa fa-star" aria-hidden="true"></i> | {{ x.keyword }}</span>
</div>
<div class="job-location">{{ x.location }}</div>
</div>
</div>
</a>
</li>
</ul> <!--job-fillter-listings-wr-->
Angular JS Code
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('arrCtrl', function($scope) {
$scope.searchData = [
{
"keyword": "Sr. Front-End Developer",
"categories": "Part Time",
"location": "Toronto"
},
{
"keyword": "Sr. Developer / Architect",
"categories": "Full Time",
"location": "Toronto"
},
{
"keyword": "Sr. .NET Developer",
"categories": "Contract",
"location": "Pickering"
},
{
"keyword": "Business Analyst (Contract)",
"categories": "Contract,Freelance",
"location": "Pickering"
}
]
});
</script>
如何通过复选框过滤列表?
由于
答案 0 :(得分:1)
我做了一个可能对你有帮助的样本。
var app = angular.module('myApp', []);
app.controller('arrCtrl', function($scope) {
$scope.categories = '';
$scope.category = [];
$scope.checkeChange = function(checked, val) {
$scope.categories = '';
for (var i in $scope.category) {
if ($scope.category[i]) {
if ($scope.categories != '')
$scope.categories += ','
$scope.categories += $scope.category[i]
}
}
}
$scope.searchData = [{
"keyword": "Sr. Front-End Developer",
"categories": "Part Time",
"location": "Toronto"
}, {
"keyword": "Sr. Developer / Architect",
"categories": "Full Time",
"location": "Toronto"
}, {
"keyword": "Sr. .NET Developer",
"categories": "Contract",
"location": "Pickering"
}, {
"keyword": "Business Analyst (Contract)",
"categories": "Contract,Freelance",
"location": "Pickering"
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="arrCtrl">
<input id="search_keywords" ng-model="yourFilter.keyword" type="text" value="" placeholder="Keywords" name="search_keywords">
<input id="search_location" ng-model="location" type="text" value="" placeholder="Location" name="search_location">
<input type="checkbox" ng-model="category[0]" ng-true-value="Full Time" ng-change="checkeChange()" />Full Time
<input type="checkbox" ng-model="category[1]" ng-change="checkeChange()" ng-true-value="Part Time" />Part Time
<input type="checkbox" ng-model="category[2]" ng-change="checkeChange()" ng-true-value="Contract" />Contract
<input type="checkbox" ng-model="category[3]" ng-change="checkeChange()" ng-true-value="Freelance" />Freelance
<h5>Search by - {{categories}}</h5>
<ul class="job-fillter-listings-wr">
<li class="job-list" ng-repeat="x in searchData | filter : {'keyword' : keyword, 'location' : location, 'categories' : categories } ">
<a href="">
<div class="center-wr">
<div class="all-job-list clearfix">
<div class="job-title-section">
<span class="job-title-"><i class="fa fa-star" aria-hidden="true"></i>{{ x.keyword }}</span>
</div>
<div class="job-location">{{ x.location }}</div>
</div>
</div>
</a>
</li>
</ul>
<!--job-fillter-listings-wr-->
</div>
</body>
答案 1 :(得分:0)