将玩家添加到AngularJS的列表中

我是AngularJS的新手。我知道一些JavaScript，但AngularJS似乎很难学习（也许这只是我）。将玩家添加到AngularJS的列表中

我的问题如下...

我的球员名单，我想有可能使用户（或教练谁），他们的球员添加到列表中。这几天我已经尝试过几种方法，但我无法弄清楚。

代码如下，和u可以检查出我plunkr here：

HTML

<!DOCTYPE html> 
<html > 
<head> 
    <!-- CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link href="style.css" rel="stylesheet" /> 
    <!-- Scripts --> 
    <script data-require="[email protected]" data-semver="1.2.17" 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script> 
    <script src="script.js"></script> 
</head> 
<body> 

<div ng-app="app"> 
<div ng-controller="MoveCtrl" class = "container"> 
<div class = "row"> 
    <div class = "col-xs-4 left-space"> 


<!--Forgot to add this block of code for input--> 
    <label>Player name: </label> <input #playerName/> 
    <button (click) = "add(playerName.value); playerName.value = ''"> 
    Add 
    </button> 
<!--Rest is the same--> 

     <label class="left-space-title" for="aplayers">Available Players</label>         
     <select class="left-space-container" size="5" multiple ng-model="available" 
     ng-options="player as player.name for player in availableplayers"> 
     </select>   

    </div> 

    <div class = "col-xs-2 mid-space "> 

     <input id="moveright" type="button" value=">>" 
     ng-click="moveItem(available, availableplayers,selectedplayers)" /> 

     <input id="moveleft" type="button" value="<<" 
     ng-click="moveItem(selected, selectedplayers,availableplayers)" />  

    </div> 

    <div class = "col-xs-4 right-space"> 

     <label class="right-space-title" for="splayers">Selected Players</label>              
     <select class="right-space-container" size="5" multiple ng-model="selected" 
     ng-options="player as player.name for player in selectedplayers"> 
     </select> 

    </div> 
</div> 
</div> 
</div> 

</body> 
</html>

CSS

.mid-space { 
    margin-top: 30px; 
} 

.left-space__title, 
.right-space__title { 
    width: 100%; 
} 

.left-space-container, 
.right-space-container { 
    width: 100%; 
    min-height: 500px; 
} 

#moveright, 
#moveleft { 
    width: 100%; 
}

的Javascript

angular.module('app', []).controller('MoveCtrl', function($scope) { 
    $scope.moveItem = function(items, from, to) { 
     items.forEach(function(item) { 
      var idx = from.indexOf(item); 
      if (idx != -1) { 
       from.splice(idx, 1); 
       to.push(item);  
      } 
     }); 
    };   

    $scope.selectedplayers = [];         

    $scope.availableplayers = [ 
     { 
     id: 1, 
     name: 'foo' 
     }, 
     { 
     id: 2, 
     name: 'boo' 
     }, 
     { 
     id: 3, 
     name: 'goo' 
     } 
    ]; 
    });

Plunkr为here，如果你想用代码来捣鼓直接

来源

2017-08-09 prius

我看到plunker工作正常。你能解释更多关于你的问题吗 – Anita

你的运动员工作，你想达到什么，你能澄清吗？ – Dario

我添加了错误版本的文件，我使用输入框和按钮更新了代码和plunkr。我只想找出一种方法让用户添加他们自己的球员到左栏。 – prius

的plunker已经更新了你的工作代码更改为新的玩家加入到现有的球员名单

add new player plunker

$scope.addItem = function(){ 
     var numberOfplayers = $scope.availableplayers.length; 
     var newPlayer = { 
      id : numberOfplayers + 1, 
      name : $scope.newPlayerName 
     } 

     console.log($scope.newPlayerName); 
     $scope.availableplayers.push(newPlayer); 
    } 

<label>Player name: </label> <input ng-model="newPlayerName"/> 
     <button ng-click = "addItem(playerName);"> 
     Add 
     </button>

完成代码更改。

1.设置输入字段的ng模型。 2.在控制器添加播放器方法中，获取输入恶魔的值。 3.用生成的id值创建新的玩家对象。 4.将新玩家对象插入可用的玩家范围变量，该变量会弹出框中的值。

来源

2017-08-10 18:26:33

谢谢罗伯特......我自己也弄不清楚...... +1 – prius

将玩家添加到AngularJS的列表中

回答

相关问题