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' 
     } 
    ]; 
    });

あなたが直接

出典

2017-08-09 prius

私はプランカがうまく動作しているのを見ます。あなたの問題についてもっと詳しく説明できますか – Anita

あなたのプランカの作品は、あなたが達成したいと思っているものを明確にすることができますか？ – Dario

私は間違ったバージョンのファイルを追加しました。コードとplunkrを入力ボックスとボタンで更新しました。私はちょうどユーザーが自分のプレーヤーを左の列に追加する方法を見つけたいと思います。 – prius

plunkerが可能な選手リストに

add new player plunker

を新しいプレーヤーを追加する作業コードの変更で更新されているコードをいじるしたい場合Plunkrは hereです

$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.コントローラーのadd playerメソッドで入力の値を取得します。 3.生成したid値を持つ新しいプレーヤーオブジェクトを作成します。 4.新しいプレイヤーオブジェクトをavailableplayersスコープ変数に挿入します。このプレイヤーは、の値をボックス内にポップアップ表示します。

出典

2017-08-10 18:26:33

ロバートありがとうございました...私は自分でこれを理解できませんでした... +1 – prius

AngularJSでリストにプレーヤーを追加する

答えて

関連する問題