2016-11-29 4 views
0

リンクリスト(例:gameID)の値を添付してクリックイベントで取得する方法はありますか?または私の全体的なアプローチが完全に間違っていますか?角がクリックされたリンクに余分な値をつける

HTML

<ul ng-repeat="item in linksList"> 
    <li ng-click="onClickLink($event)"> 
    <a href="#">{{ item.gameName }}</a></li> 
</ul> 

JS

.controller('LinkCtrl', function ($scope) { 
    $scope.linksList = [ 
     { 
      gameID: 'l2', 
      gameName: 'Lineage 2' 
     }, 
     { 
      gameID: 'h4', 
      gameName: 'Heroes of Might and Magic IV' 
     } 
    ] 

    $scope.onClickLink = function ($event) { 
     console.log($event.target.text) 
    } 
} 
+0

onClickLink(item.gameId)を使用すると、コントローラで$ scope.onClickLink = function(gameid){ console.log(gameid) }のイベントは必要ありません。 –

+0

はあなたを取得しませんでした。詳しく教えてください。 – Sravan

+0

@Sravan基本的に私はリストを作成したいと思います。クリックしたアイテムごとに$ http.postリクエストでデータを送信する必要があります。クリックされた各リンクのデータには、たとえばgameID、gameNameが含まれていなければなりません。どのようにすれば、gameIdとgameNameの両方をconsole.logの中に入れることができますか? –

答えて

1

あなたはこのようなものを使用することができます。

<ul ng-repeat="item in linksList"> 
    <li ng-click="onClickLink(item.gameID)"> 
    <a href="#">{{ item.gameName }}</a></li> 
</ul> 

そして、あなたがそのようあなたがこのplunker item.check .click任意のリスト項目をそのリストに関連する全データにアクセスできるように、コントローラ内部で

$scope.onClickLink = function (gameID) { 
    console.log(gameID) 
} 
+1

あなたはあなたの答えを編集してください - > console.log(gameId)console.log(gameID) –

+0

どちらも良い答えです。私はこのコードを見ることができるので、私はこれを受け入れます。ありがとう。 –

1

はちょうどng-click="onClickLink(item)などのクリックイベントにアイテムを送信ここでIDと名前について警告します

1

選択したデータをコントローラに送信し、投稿要求を行うための要件は次のとおりです。

post httpリクエストのビューで関数呼び出しから送信された引数を使用できます。

$scope.onClickLink = function (item) { 
    alert(item.gameID) 
    $http.post('/somefile', {'gameID': item.gameID}) 
    .then(function(response) { 
     $scope.data = response.data; 
    }, function(response) { 
     $scope.data = "Something went wrong"; 
    }); 
} 

ビュー:

<div ng-app="myApp" ng-controller="myCtrl"> 

<ul ng-repeat="item in linksList"> 
    <li ng-click="onClickLink(item)"> 
    <a href="#">{{ item.gameName }}</a></li> 
</ul> 
    </body> 

</html> 


</div> 

Here is a fiddle

方法は、データを使用してPOSTリクエストで、この、

機能のようなものになります

+0

ありがとう!私は投稿のためのコードの残りの部分を持っていた、ちょうどそこにオブジェクトを追加する方法を知らなかった。そして私は次のばかげた質問ですぐに戻りますxDD –

+0

大丈夫、良い一日を。 – Sravan

関連する問題