【问题标题】:Getting ngModel value in controller - AngularJS?在控制器中获取 ngModel 值 - AngularJS?
【发布时间】: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


【解决方案1】:

您的代码几乎没有问题,

(i) 您正在使用播放器作为搜索值,它是一个集合,因此应该更改它。

  <input id="search" class="search nomargin" type="text" class="validate dark" ng-model="player.name">

并用作过滤器,

<ul ng-repeat="eachPlayer in player |filter:player.name">

而且没有办法用你的 html 代码选择播放器,所以我添加了一个单选输入按钮来选择播放器并分配给范围变量。

  <input type="radio" ng-model="selected" name="rdbRisk" ng-change="Assign(selected)" ng-value="eachPlayer" /> {{eachPlayer.name}}

DEMO

【讨论】:

  • 在物质上它不是先生
  • 查看演示 aravi
  • 是的演示工作,但当我们集成到 materilaize 时它不会工作
  • @AraviS 你需要整理一下,如果有帮助就点赞
  • 你是用html方式完成的吗?请检查里面的materilaize的cdn脚本,它不会工作
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-09
相关资源
最近更新 更多