【发布时间】:2016-10-08 12:44:39
【问题描述】:
点击 submitPlayer 后会提示玩家姓名,我也想要对应的玩家 id。
HTML
<div class="row">
<div class="input-field col s12">
<input id="search" class="search nomargin" type="text" class="validate dark" ng-model="player">
<label for="search"><i class="fa fa-search" aria-hidden="true"></i> Search Player</label>
</div>
</div>
<div class="searchresultsbox z-depth-1">
<div class="row nopad nomargin">
<div class="col s12 nopad nomargin">
<ul ng-repeat="eachPlayer in player |filter:search">
<li>{{eachPlayer.name}}</li>
</ul>
</div>
</div>
</div>
<div class="modalbuttongroup">
<a href="" class="center waves-effect waves-light btn addplayer" ng-click="submitPlayer()">ADD PLAYER</a>
</div>
模块和控制器
var app = angular.module('playerapp', []);
app.controller("myController", function ($scope) {
$scope.player=
[
{
"id": "57f2ade2d9913939d0de4af8",
"name": "A Team Player"
},
{
"id": "57f3d03fd99139333880a2f8",
"name": "B Team Player"
},
{
"id": "57f3d05ad99139333880a2fa",
"name": "C Team Player"
},
{
"id": "57f3fff6d991394b3daa2d49",
"name": "D Team Player"
},
{
"id": "57f422d6d991390ea392762e",
"name": "E Team Player"
}
]
$scope.submitPlayer = function() {
alert(JSON.stringify($scope.player,null,5))
};
});
此外,我希望玩家名称在选择玩家后显示在文本字段中,并且在单击“添加玩家”时,我希望玩家 ID 被提醒。
【问题讨论】:
-
您所描述的内容与您在此处设计的 UI 不完全匹配。您有一个搜索框,后跟一个表格,然后是一个提交按钮。如果您点击提交按钮,警报将显示整个数组。如果您只得到一个项目,那是因为您的搜索将您的数组限制为一个元素。但即使这样也没有意义,因为您的搜索字段也没有正确设置。
标签: javascript html angularjs angularjs-scope angular-controller