ボタンをクリックしてテーブル行の値を取得する方法Angularjs

以下のplunkrで選択した行のテーブル行の値を取得する方法を知りたいと思います。テーブルのチェックボックスを使用して行を選択し、更新ボタンをクリックすると、私は行ID、行の名前、行の値が必要です。ここplunkrは - https://plnkr.co/edit/9wWxczEH22aG71RN3B0Q?p=preview ボタンをクリックしてテーブル行の値を取得する方法Angularjs

html code: 
<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <table style="width:100%;overflow: scroll; border: 2px solid #AAA; "> 
     <thead style="border-bottom: 1px solid #AAA"> 
      <tr> 

       <th style="width:50%">&nbsp;&nbsp;<input type='checkbox'/>&nbsp;&nbsp; catalog</th> 
       <th style="width:25%">currentVersion</th> 
       <th style="width:25%">new Version</th> 
      </tr> 
     </thead> 
     <tbody style="color: #007db8;"> 
      <tr id='1' name='MT' > 
       <td style="width:50%"> 
        &nbsp;&nbsp;<input type='checkbox' />&nbsp;&nbsp;Multiple 
       </td> 
       <td style="width:25%">1.2</td> 
       <td style="width:25%">1.3</td> 
      </tr> 
     </tbody> 
    </table> 
    <button style="font-size: 11px;" type="button" class="btn btn-primary" >Update</button> 
    </body> 

</html>

出典

2017-03-14 shaaa

を使用して、ここで、各行、オプションの値を取得するには多くの選択肢がありますか？使用することができます 'ng-click'イベントのヘルプ –

@shaaaこれはあなたを助けるかもしれない私の答えを参照してください..親tdまたはtrを得るために使用できる要素オブジェクトを得ることができます –

あなたはngのリピートとNG-モデルid`が行にどのように割り当て `

angular.module('test', []) 
 
.controller('test', function ($scope) { 
 
    $scope.itemSelecteds = {}; 
 
    $scope.dummyModel = {}; 
 
    $scope.items = [{ 
 
    id: 1, 
 
    name: 'mit', 
 
    catalog: 'Multiple', 
 
    currentVersion: '1.2', 
 
    newVersion: '1.3', 
 
    }, { 
 
    id: 2, 
 
    name: 'mit', 
 
    catalog: 'Multiple', 
 
    currentVersion: '1.2', 
 
    newVersion: '1.3', 
 
    }, { 
 
    id: 3, 
 
    name: 'mit', 
 
    catalog: 'Multiple', 
 
    currentVersion: '1.2', 
 
    newVersion: '1.3', 
 
    }]; 
 
    
 
    $scope.selectItem = function (item) { 
 
    // If checkbox is checked 
 
    if ($scope.dummyModel[item.id]) { 
 
     $scope.itemSelecteds[item.id] = item; 
 
    } else { 
 
     delete $scope.itemSelecteds[item.id]; 
 
    } 
 
    } 
 
    
 
    $scope.update = function() { 
 
    console.log($scope.itemSelecteds); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="test" ng-controller="test"> 
 
    <table style="width:100%;overflow: scroll; border: 2px solid #AAA; "> 
 
     <thead style="border-bottom: 1px solid #AAA"> 
 
      <tr> 
 
       
 
       <th style="width:50%">&nbsp;&nbsp;<input type='checkbox'/>&nbsp;&nbsp; catalog</th> 
 
       <th style="width:25%">currentVersion</th> 
 
       <th style="width:25%">new Version</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody style="color: #007db8;"> 
 
      <tr ng-repeat="item in items" ng-attr-id="item.id"> 
 
       <td style="width:50%"> 
 
        &nbsp;&nbsp;<input type='checkbox' ng-model="dummyModel[item.id]" ng-change="selectItem(item)"/>&nbsp;&nbsp;{{ item.catalog }} 
 
       </td> 
 
       <td style="width:25%">{{ item.currentVersion }}</td> 
 
       <td style="width:25%">{{ item.newVersion }}</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
    <button style="font-size: 11px;" type="button" class="btn btn-primary" ng-click="update()" >Update</button> 
 
    </body>

出典

2017-03-14 05:29:32

ありがとう!!これはうまくいった。 – shaaa

チェックイベントに取得するためにng-checkedイベントを使用していますが、チェックし、未チェックのイベントの両方がここng-click

を試みる処理する場合、これはあなたの入力要素を与えます。あなたはelemnt.parent.parentを使ってtdまたはtrとその値を得ることができます。

function doSomething(element){ 

    var parent=elemnt.parent.parent; 
    // do something 

}

出典

2017-03-14 05:15:53

ボタンをクリックしてテーブル行の値を取得する方法Angularjs

答えて

関連する問題