將玩家添加到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的列表中

回答

相關問題