我对Angular相对较新，但一直很享受。我正在制作一个个人项目，列出足球运动员名单并在页面上显示列表。我希望用户能够按姓名，职位和团队细化搜索。所以他们可能会搜索所有在小马队打QB的约翰。
我正在使用从我刚刚下载并在本地使用的在线API中获取的JSON文件。
列表显示正常，按名称和位置搜索效果很好，但团队搜索有点时髦。它可能与JSON文件的结构有关。所有相关代码如下。对不起他们中的几个，但我希望尽可能彻底。
我的players.html：
<div class="col-md-8 col-md-offset-2" ng-controller="PlayerController">
<h2>Player Stats</h2>
{{ sortType }}
<section class="search">
<form>
<div class="form-group col-md-6">
<label>Search by Name</label>
<input class="form-control" type="text" name="query" ng-model="query" min="1">
</div>
<div class="form-group col-md-6">
<label>Search by Position</label>
<select class="form-control" ng-model="position">
<option value="all" selected>All positions</option>
<optgroup label="Offense">
<option>QB</option>
<option>HB</option>
<option>FB</option>
<option>WR</option>
<option>TE</option>
<option>LT</option>
<option>LG</option>
<option>C</option>
<option>RG</option>
<option>RT</option>
</optgroup>
<optgroup label="Defense">
<option>RE</option>
<option>LE</option>
<option>DT</option>
<option>OLB</option>
<option>MLB</option>
<option>ILB</option>
<option>LB</option>
<option>CB</option>
<option>SS</option>
<option>FS</option>
<option>K</option>
<option>P</option>
</optgroup>
</select>
</div>
<div class="form-group col-md-6">
<label>Search by Team</label>
<select class="form-control" ng-model="team">
<option value="all" selected>All Teams</option>
<optgroup label="AFC East">
<option value="NE">New England Patriots</option>
<option value="BUF">Buffalo Bills</option>
<option value="NYJ">New York Jets</option>
<option value="MIA">Miami Dolphins</option>
</optgroup>
<optgroup label="AFC North">
<option value="PIT">Pittsburgh Steelers</option>
<option value="BAL">Baltimore Ravens</option>
<option value="CIN">Cinncinati Bengals</option>
<option value="CLE">Cleveland Browns</option>
</optgroup>
<optgroup label="AFC South">
<option value="HOU">Houston Texans</option>
<option value="TEN">Tennessee Titans</option>
<option value="IND">Indianapolis Colts</option>
<option value="JAC">Jacksonville Jaguars</option>
</optgroup>
<optgroup label="AFC West">
<option value="OAK">Oakland Raiders</option>
<option value="DEN">Denver Broncos</option>
<option value="KC">Kansas City Chiefs</option>
<option value="SD">San Diego Chargers</option>
</optgroup>
<optgroup label="NFC East">
<option value="DAL">Dallas Cowboys</option>
<option value="PHI">Philidelphia Eagles</option>
<option value="WAS">Washington Redskins</option>
<option value="NYG">New York Giants</option>
</optgroup>
<optgroup label="NFC North">
<option value="MIN">Minnesotta Vikings</option>
<option value="GB">Green Bay Packers</option>
<option value="DET">Detroit Lions</option>
<option value="CHI">Chicago Bears</option>
</optgroup>
<optgroup label="NFC South">
<option value="ATL">Atlanta Falcons</option>
<option value="TB">Tampa Bay Buccaneers</option>
<option value="NO">New Orleans Saints</option>
<option value="CAR">Carolina Panthers</option>
</optgroup>
<optgroup label="NFC West">
<option value="SEA">Seattle Seahawks</option>
<option value="STL">St Louis Rams</option>
<option value="ARI">Arizona Cardinals</option>
<option value="SF">San Fransisco 49ers</option>
</optgroup>
</select>
</div>
</form>
</section>
<table class="table table-striped">
<thead>
<tr>
<th ng-click="sort('LastName') ">Name <span class="glyphicon sort-icon" ng-show="sortType=='LastName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th ng-click="sort('Position') ">Position <span class="glyphicon sort-icon" ng-show="sortType=='Position'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th ng-click="sort('JerseyNumber') ">Number <span class="glyphicon sort-icon" ng-show="sortType=='JerseyNumber'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th ng-click="sort('Abbreviation') ">Team <span class="glyphicon sort-icon" ng-show="sortType=='Abbreviation'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="player in playerList | filter: query || position || team | orderObjectBy: sortType">
<td><a href="#/player-detail/{{ player.player.ID }}">{{ player.player.FirstName }} {{ player.player.LastName }}</a></td>
<td>{{ player.player.Position }}</td>
<td>#{{ player.player.JerseyNumber }}</td>
<td>{{ player.team.Abbreviation }}</td>
</tr>
</tbody>
</table>
<!--dir-pagination-controls></dir-pagination-controls-->
我的PlayerController：
nflControllers.controller('PlayerController', function($scope, $http) {
$scope.msg = 'player controller';
$scope.sortType = 'LastName';
$scope.sort = function(key) {
$scope.sortType = key;
}
$http.get('js/json/players.json').then(function(response) {
$scope.playerList = response.data.cumulativeplayerstats.playerstatsentry;
//console.log($scope.playerList)
});
}）;
player.json的样本：
{"cumulativeplayerstats":{
"lastUpdatedOn":"2016-07-11 10:29:58 PM",
"playerstatsentry":[
{
"player":{
"ID":"6923",
"LastName":"Abbrederis",
"FirstName":"Jared",
"JerseyNumber":"84",
"Position":"WR"
},
"team":{
"ID":"62",
"City":"Green Bay",
"Name":"Packers",
"Abbreviation":"GB"
},
"stats":{
"GamesPlayed":{
"@abbreviation":"G",
"#text":"8"
},
"RushAttempts":{
"@category":"Rushing",
"@abbreviation":"Att",
"#text":"0"
},
"RushYards":{
"@category":"Rushing",
"@abbreviation":"Yds",
"#text":"0"
},
"RushAverage":{
"@category":"Rushing",
"@abbreviation":"Avg",
"#text":"0.0"
},
"RushTD":{
"@category":"Rushing",
"@abbreviation":"TD",
"#text":"0"
},
"RushLng":{
"@category":"Rushing",
"@abbreviation":"Lng",
"#text":"0"
},
"Rush20Plus":{
"@category":"Rushing",
"@abbreviation":"20+",
"#text":"0"
},
"Rush40Plus":{
"@category":"Rushing",
"@abbreviation":"40+",
"#text":"0"
},
"RushFumbles":{
"@category":"Rushing",
"@abbreviation":"Fum",
"#text":"0"
},
"Targets":{
"@category":"Receiving",
"@abbreviation":"Tgt",
"#text":"16"
},
"Receptions":{
"@category":"Receiving",
"@abbreviation":"Rec",
"#text":"9"
},
"RecYards":{
"@category":"Receiving",
"@abbreviation":"Yds",
"#text":"111"
},
"RecAverage":{
"@category":"Receiving",
"@abbreviation":"Avg",
"#text":"12.3"
},
"RecTD":{
"@category":"Receiving",
"@abbreviation":"TD",
"#text":"0"
},
"RecLng":{
"@category":"Receiving",
"@abbreviation":"Lng",
"#text":"32"
},
"Rec20Plus":{
"@category":"Receiving",
"@abbreviation":"20+",
"#text":"1"
},
"Rec40Plus":{
"@category":"Receiving",
"@abbreviation":"40+",
"#text":"0"
},
"RecFumbles":{
"@category":"Receiving",
"@abbreviation":"Fumbles",
"#text":"0"
},
"TackleSolo":{
"@category":"Tackles",
"@abbreviation":"Solo",
"#text":"0"
},
"TackleTotal":{
"@category":"Tackles",
"@abbreviation":"Total",
"#text":"0"
},
"TackleAst":{
"@category":"Tackles",
"@abbreviation":"Ast",
"#text":"0"
},
"Sacks":{
"@category":"Tackles",
"@abbreviation":"Sacks",
"#text":"0.0"
},
"SackYds":{
"@category":"Tackles",
"@abbreviation":"SackYds",
"#text":"0"
},
"Safeties":{
"@category":"Interceptions",
"@abbreviation":"Sfty",
"#text":"0"
},
"Interceptions":{
"@category":"Interceptions",
"@abbreviation":"Int",
"#text":"0"
},
"IntTD":{
"@category":"Interceptions",
"@abbreviation":"TD",
"#text":"0"
},
"IntYds":{
"@category":"Interceptions",
"@abbreviation":"Yds",
"#text":"0"
},
"IntAverage":{
"@category":"Interceptions",
"@abbreviation":"Avg",
"#text":"0.0"
},
"IntLng":{
"@category":"Interceptions",
"@abbreviation":"Lng",
"#text":"0"
},
"PassesDefended":{
"@category":"Interceptions",
"@abbreviation":"PD",
"#text":"0"
},
"Stuffs":{
"@category":"Interceptions",
"@abbreviation":"Stuffs",
"#text":"0"
},
"StuffYds":{
"@category":"Interceptions",
"@abbreviation":"StuffYds",
"#text":"0"
},
"KB":{
"@category":"Interceptions",
"@abbreviation":"KB",
"#text":"0"
},
"Fumbles":{
"@category":"Fumbles",
"@abbreviation":"Fum",
"#text":"0"
},
"FumLost":{
"@category":"Fumbles",
"@abbreviation":"Lost",
"#text":"0"
},
"FumForced":{
"@category":"Fumbles",
"@abbreviation":"Forced",
"#text":"0"
},
"FumOwnRec":{
"@category":"Fumbles",
"@abbreviation":"OwnRec",
"#text":"0"
},
"FumOppRec":{
"@category":"Fumbles",
"@abbreviation":"OppRec",
"#text":"0"
},
"FumRecYds":{
"@category":"Fumbles",
"@abbreviation":"RecYds",
"#text":"0"
},
"FumTotalRec":{
"@category":"Fumbles",
"@abbreviation":"TotalRec",
"#text":"0"
},
"FumTD":{
"@category":"Fumbles",
"@abbreviation":"TD",
"#text":"0"
},
"KrRet":{
"@category":"Kickoff Returns",
"@abbreviation":"Ret",
"#text":"2"
},
"KrYds":{
"@category":"Kickoff Returns",
"@abbreviation":"Yds",
"#text":"52"
},
"KrAvg":{
"@category":"Kickoff Returns",
"@abbreviation":"Avg",
"#text":"26.0"
},
"KrLng":{
"@category":"Kickoff Returns",
"@abbreviation":"Lng",
"#text":"30"
},
"KrTD":{
"@category":"Kickoff Returns",
"@abbreviation":"TD",
"#text":"0"
},
"Kr20Plus":{
"@category":"Kickoff Returns",
"@abbreviation":"20+",
"#text":"2"
},
"Kr40Plus":{
"@category":"Kickoff Returns",
"@abbreviation":"40+",
"#text":"0"
},
"KrFC":{
"@category":"Kickoff Returns",
"@abbreviation":"FC",
"#text":"0"
},
"KrFum":{
"@category":"Kickoff Returns",
"@abbreviation":"Fum",
"#text":"0"
},
"PrRet":{
"@category":"Punt Returns",
"@abbreviation":"Ret",
"#text":"0"
},
"PrYds":{
"@category":"Punt Returns",
"@abbreviation":"Yds",
"#text":"0"
},
"PrAvg":{
"@category":"Punt Returns",
"@abbreviation":"Avg",
"#text":"0.0"
},
"PrLng":{
"@category":"Punt Returns",
"@abbreviation":"Lng",
"#text":"0"
},
"PrTD":{
"@category":"Punt Returns",
"@abbreviation":"TD",
"#text":"0"
},
"Pr20Plus":{
"@category":"Punt Returns",
"@abbreviation":"20+",
"#text":"0"
},
"Pr40Plus":{
"@category":"Punt Returns",
"@abbreviation":"40+",
"#text":"0"
},
"PrFC":{
"@category":"Punt Returns",
"@abbreviation":"FC",
"#text":"1"
},
"PrFum":{
"@category":"Punt Returns",
"@abbreviation":"Fum",
"#text":"0"
}
}
},
{
"player":{
"ID":"6826",
"LastName":"Abdullah",
"FirstName":"Ameer",
"JerseyNumber":"21",
"Position":"RB"
},
"team":{
"ID":"61",
"City":"Detroit",
"Name":"Lions",
"Abbreviation":"DET"
},
"stats":{
"GamesPlayed":{
"@abbreviation":"G",
"#text":"16"
},
"RushAttempts":{
"@category":"Rushing",
"@abbreviation":"Att",
"#text":"143"
},
"RushYards":{
"@category":"Rushing",
"@abbreviation":"Yds",
"#text":"607"
},
"RushAverage":{
"@category":"Rushing",
"@abbreviation":"Avg",
"#text":"4.2"
},
"RushTD":{
"@category":"Rushing",
"@abbreviation":"TD",
"#text":"2"
},
"RushLng":{
"@category":"Rushing",
"@abbreviation":"Lng",
"#text":"36"
},
"Rush20Plus":{
"@category":"Rushing",
"@abbreviation":"20+",
"#text":"4"
},
"Rush40Plus":{
"@category":"Rushing",
"@abbreviation":"40+",
"#text":"0"
},
"RushFumbles":{
"@category":"Rushing",
"@abbreviation":"Fum",
"#text":"4"
},
"Targets":{
"@category":"Receiving",
"@abbreviation":"Tgt",
"#text":"38"
},
"Receptions":{
"@category":"Receiving",
"@abbreviation":"Rec",
"#text":"25"
},
"RecYards":{
"@category":"Receiving",
"@abbreviation":"Yds",
"#text":"183"
},
"RecAverage":{
"@category":"Receiving",
"@abbreviation":"Avg",
"#text":"7.3"
},
"RecTD":{
"@category":"Receiving",
"@abbreviation":"TD",
"#text":"1"
},
"RecLng":{
"@category":"Receiving",
"@abbreviation":"Lng",
"#text":"36"
},
"Rec20Plus":{
"@category":"Receiving",
"@abbreviation":"20+",
"#text":"1"
},
"Rec40Plus":{
"@category":"Receiving",
"@abbreviation":"40+",
"#text":"0"
},
"RecFumbles":{
"@category":"Receiving",
"@abbreviation":"Fumbles",
"#text":"0"
},
"TackleSolo":{
"@category":"Tackles",
"@abbreviation":"Solo",
"#text":"4"
},
"TackleTotal":{
"@category":"Tackles",
"@abbreviation":"Total",
"#text":"4"
},
"TackleAst":{
"@category":"Tackles",
"@abbreviation":"Ast",
"#text":"0"
},
"Sacks":{
"@category":"Tackles",
"@abbreviation":"Sacks",
"#text":"0.0"
},
"SackYds":{
"@category":"Tackles",
"@abbreviation":"SackYds",
"#text":"0"
},
"Safeties":{
"@category":"Interceptions",
"@abbreviation":"Sfty",
"#text":"0"
},
"Interceptions":{
"@category":"Interceptions",
"@abbreviation":"Int",
"#text":"0"
},
"IntTD":{
"@category":"Interceptions",
"@abbreviation":"TD",
"#text":"0"
},
"IntYds":{
"@category":"Interceptions",
"@abbreviation":"Yds",
"#text":"0"
},
"IntAverage":{
"@category":"Interceptions",
"@abbreviation":"Avg",
"#text":"0.0"
},
"IntLng":{
"@category":"Interceptions",
"@abbreviation":"Lng",
"#text":"0"
},
"PassesDefended":{
"@category":"Interceptions",
"@abbreviation":"PD",
"#text":"0"
},
"Stuffs":{
"@category":"Interceptions",
"@abbreviation":"Stuffs",
"#text":"0"
},
"StuffYds":{
"@category":"Interceptions",
"@abbreviation":"StuffYds",
"#text":"0"
},
"KB":{
"@category":"Interceptions",
"@abbreviation":"KB",
"#text":"0"
},
"Fumbles":{
"@category":"Fumbles",
"@abbreviation":"Fum",
"#text":"5"
},
"FumLost":{
"@category":"Fumbles",
"@abbreviation":"Lost",
"#text":"2"
},
"FumForced":{
"@category":"Fumbles",
"@abbreviation":"Forced",
"#text":"0"
},
"FumOwnRec":{
"@category":"Fumbles",
"@abbreviation":"OwnRec",
"#text":"2"
},
"FumOppRec":{
"@category":"Fumbles",
"@abbreviation":"OppRec",
"#text":"0"
},
"FumRecYds":{
"@category":"Fumbles",
"@abbreviation":"RecYds",
"#text":"5"
},
"FumTotalRec":{
"@category":"Fumbles",
"@abbreviation":"TotalRec",
"#text":"2"
},
"FumTD":{
"@category":"Fumbles",
"@abbreviation":"TD",
"#text":"0"
},
"KrRet":{
"@category":"Kickoff Returns",
"@abbreviation":"Ret",
"#text":"36"
},
"KrYds":{
"@category":"Kickoff Returns",
"@abbreviation":"Yds",
"#text":"1050"
},
"KrAvg":{
"@category":"Kickoff Returns",
"@abbreviation":"Avg",
"#text":"29.2"
},
"KrLng":{
"@category":"Kickoff Returns",
"@abbreviation":"Lng",
"#text":"104"
},
"KrTD":{
"@category":"Kickoff Returns",
"@abbreviation":"TD",
"#text":"0"
},
"Kr20Plus":{
"@category":"Kickoff Returns",
"@abbreviation":"20+",
"#text":"32"
},
"Kr40Plus":{
"@category":"Kickoff Returns",
"@abbreviation":"40+",
"#text":"4"
},
"KrFC":{
"@category":"Kickoff Returns",
"@abbreviation":"FC",
"#text":"0"
},
"KrFum":{
"@category":"Kickoff Returns",
"@abbreviation":"Fum",
"#text":"0"
},
"PrRet":{
"@category":"Punt Returns",
"@abbreviation":"Ret",
"#text":"0"
},
"PrYds":{
"@category":"Punt Returns",
"@abbreviation":"Yds",
"#text":"0"
},
"PrAvg":{
"@category":"Punt Returns",
"@abbreviation":"Avg",
"#text":"0.0"
},
"PrLng":{
"@category":"Punt Returns",
"@abbreviation":"Lng",
"#text":"0"
},
"PrTD":{
"@category":"Punt Returns",
"@abbreviation":"TD",
"#text":"0"
},
"Pr20Plus":{
"@category":"Punt Returns",
"@abbreviation":"20+",
"#text":"0"
},
"Pr40Plus":{
"@category":"Punt Returns",
"@abbreviation":"40+",
"#text":"0"
},
"PrFC":{
"@category":"Punt Returns",
"@abbreviation":"FC",
"#text":"0"
},
"PrFum":{
"@category":"Punt Returns",
"@abbreviation":"Fum",
"#text":"0"
}
}
}
]}}