极客观点
项目管理
HarmonyOS
<!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以后就不会有现在这个问题了。