javascript - angular 筛选小例子
本文介绍了javascript - angular 筛选小例子的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-3.1.0.js"></script>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<div class="row-fluid">
<div class="span3 " ng-controller="FilterCtrl">
<form class="form-horizontal">
<div class="controls-row">
<label for="searchTextBox" class="control-label">Search:</label>
<div class="controls">
<input type="text" id="searchTextBox" ng-model="filterService.searchText"/>
</div>
</div>
<div class="controls-row">
<label for="sportComboBox">Sport:</label>
<div class="controls">
<select id="sportComboBox" ng-model="filterService.activeFilters.sport">
<option ng-repeat="sport in ['BasketBall','Hockey','Football']">
{{sport}}
</option>
</select>
</div>
</div>
<div class="controls-row">
<label for="cityComboBox" class="controls-label">Citys:</label>
<div class="controls">
<select id="cityComboBox" ng-model="filterService.activeFilters.city">
<option ng-repeat="city in ['Dallas','Los Angeles','Boston','New York']">
{{city}}
</option>
</select>
</div>
</div>
<div class="controls-row">
<label class="control-label">Featured:</label>
<div class="controls">
<input type="checkbox" ng-model="filterService.activeFilters.featured" ng-false-value=""/>
</div>
</div>
</form>
</div>
<div class="offset1 span8" ng-controller="ListCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>Sport</th>
<th>City</th>
<th>Featured</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="team in teamsList | filter:filterService.activeFilters | filter:filterService.searchText">
<td>{{team.name}}</td>
<td>{{team.sport}}</td>
<td>{{team.city}}</td>
<td>{{team.featured}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
angular.module("myApp.services",[]).
factory("filterService",function(){
return {
activeFilters:{},
searchText:"",
}
})
var app=angular.module("myApp",["myApp.services"]);
app.controller("ListCtrl",function($scope,filterService){
$scope.filterService=filterService;
$scope.teamsList=[
{
id:1,name:"1asdasd",sport:"BasketBall",
city:"Dallas",featured:true,
},
{
id:2,name:"2asdasd",sport:"BasketBall",
city:"Dallas",featured:true,
},
{
id:3,name:"3asdasd",sport:"Football",
city:"New York",featured:true,
},
{
id:4,name:"4asdasd",sport:"Hockey",
city:"Los Angeles",featured:true,
},
{
id:5,name:"5asdasd",sport:"BasketBall",
city:"Dallas",featured:false,
}
];
});
app.controller("FilterCtrl",function($scope,filterService){
$scope.filterService=filterService;
$scope.$watch(filterService,function(old,newVal){
console.log(newVal)
})
})
</script>
</html>问一下上面下拉框选择之后筛选有问题，但不知道是哪里出问题了？
解决方案
我给你改好了一个，你对照的看看吧。我感觉如果加上value以后就不会有现在这个问题了。
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row-fluid">
<div class="span3 " ng-controller="FilterCtrl">
<div style="background-color:#333;color:#fff">
<p>filterService.searchText {{filterService.searchText}}</p>
<p>filterService.activeFilters.sport {{filterService.activeFilters.sport}}</p>
<p>filterService.activeFilters.city {{filterService.activeFilters.city}}</p>
<p>filterService.activeFilters.featured {{filterService.activeFilters.featured}}</p>
<p>filterService.activeFilters {{filterService.activeFilters}}</p>
</div>
<form class="form-horizontal">
<div class="controls-row">
<label for="searchTextBox" class="control-label">Search:</label>
<div class="controls">
<input type="text" id="searchTextBox" ng-model="filterService.searchText"/>
</div>
</div>
<div class="controls-row">
<label for="sportComboBox">Sport:</label>
<div class="controls">
<select id="sportComboBox" ng-model="filterService.activeFilters.sport">
<option ng-repeat="sport in ['','BasketBall','Hockey','Football']">{{sport}}</option>
</select>
</div>
</div>
<div class="controls-row">
<label for="cityComboBox" class="controls-label">Citys:</label>
<div class="controls">
<select id="cityComboBox" ng-model="filterService.activeFilters.city">
<option ng-repeat="city in ['','Dallas','Los Angeles','Boston','New York']">
{{city}}
</option>
</select>
</div>
</div>
<div class="controls-row">
<label class="control-label">Featured:</label>
<div class="controls">
<input type="checkbox" ng-model="filterService.activeFilters.featured" ng-false-value=""/>
</div>
</div>
</form>
</div>
<div class="offset1 span8" ng-controller="ListCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>Sport</th>
<th>City</th>
<th>Featured</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="team in teamsList | filter:filterService.searchText | filter:filterService.activeFilters ">
<td>{{team.name}}</td>
<td>{{team.sport}}</td>
<td>{{team.city}}</td>
<td>{{team.featured}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
angular.module("myApp.services",[]).
factory("filterService",function(){
return {
activeFilters:{},
searchText:"",
}
})
var app=angular.module("myApp",["myApp.services"]);
app.controller("ListCtrl",function($scope,filterService){
$scope.filterService=filterService;
$scope.teamsList=[
{
id:1,name:"1asdasd",sport:"BasketBall",
city:"Dallas",featured:true,
},
{
id:2,name:"2asdasd",sport:"BasketBall",
city:"Dallas",featured:true,
},
{
id:3,name:"3asdasd",sport:"Football",
city:"New York",featured:true,
},
{
id:4,name:"4asdasd",sport:"Hockey",
city:"Los Angeles",featured:true,
},
{
id:5,name:"5asdasd",sport:"BasketBall",
city:"Dallas",featured:false,
}
];
});
app.controller("FilterCtrl",function($scope,filterService){
$scope.filterService=filterService;
$scope.$watch(filterService,function(old,newVal){
console.log(newVal)
})
})
</script>
</html>这篇关于javascript - angular 筛选小例子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
