Zeileninformationen an angularjs-Controller senden, wenn das Kontrollkästchen in Zeile angeklickt wird

Question

Ich habe einen HTML-Code, der angularjs verwendet, um eine Tabelle anzuzeigen. Auf dieser Tabelle befindet sich in jeder Zeile ein Kontrollkästchen.

Die Tabelle sieht so aus;

Hier ist der HTML-Code.

<div ng-app ng-controller="CheckCtrl"> 
    <table class="table table-hover data-table sort display" style="width:100%"> 
     <thead> 
     <tr> 
      <th class="Serial_"> 
       Serial 
      </th> 
      <th class="Name_"> 
       Name 
      </th> 
      <th class="ID_"> 
       ID 
      </th> 
      <th class="On_off_"> 
       On/off 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="item in check_items"> 
      <td>{{item.SERIAL}}</td> 
      <td>{{item.NAME}}</td> 
      <td>{{item.ID}}</td> 
      <td> <input type="checkbox" ng-checked="item.ON_OFF == '1'"></td> 
     </tbody> 
    </table> 
</div> 

Hier ist mein AngularJS Controller-Code. Diese

controller('CheckCtrl', ['$scope', '$http', 'configuration', 
    function ($scope, $http, $configuration) { 
     var url_api = $configuration.host + "cloe/webroot/cloe-cloud/app/API.json"; 
     $http.get(url_api).success(function(data) 
     { 
      $scope.check_items = data; 
     }); 

ist das, was ich will. Wenn ein Benutzer auf ein Ankreuzfeld klickt, werden Informationen bezüglich aller Elemente in der bestimmten Zeile, die zu dem angeklickten Ankreuzfeld gehört, an eine angualrjs-Controller-Funktion zur Verarbeitung gesendet. Diese Informationen sollten die Seriennummer, den Namen, die ID und den neuen Status von Ein/Aus enthalten, nachdem Sie auf das Kontrollkästchen geklickt haben.

Ich benutze angularjs v1 und twitter bootstrap.

BEARBEITEN: Bearbeiten der ursprünglichen Fragedetails, um anzugeben, dass die Zeileninformationen gesendet werden sollen, wenn das Kontrollkästchen angeklickt wird und nicht nur, wenn das Kontrollkästchen aktiviert ist.

Answer 1

falsch Wir ng-Änderung verwenden können Zeilendaten zu senden als Objekt an die Steuerung.

var serial = row.SERIAL; 
var name = row.NAME; 
var id = row.ID; 
var onOff = row.ON_OFF; 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="CheckCtrl"> 
 
    <table class="table table-hover data-table sort display" style="width:100%"> 
 
     <thead> 
 
     <tr> 
 
      <th class="Serial_"> 
 
       Serial 
 
      </th> 
 
      <th class="Name_"> 
 
       Name 
 
      </th> 
 
      <th class="ID_"> 
 
       ID 
 
      </th> 
 
      <th class="On_off_"> 
 
       On/off 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="item in check_items"> 
 
      <td>{{item.SERIAL}}</td> 
 
      <td>{{item.NAME}}</td> 
 
      <td>{{item.ID}}</td> 
 
      <td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)"></td> 
 
     </tbody> 
 
    </table> 
 
</div> 
 

 
<script> 
 
    var app = angular.module('app',[]); 
 
    app.controller('CheckCtrl', ['$scope', '$http', function ($scope, $http) { 
 
     $scope.check_items = 
 
     [ 
 
      { 
 
      SERIAL:'Test Serial', 
 
      NAME:'Test Name', 
 
      ID : 10, 
 
      ON_OFF : '1' 
 
      } 
 
     ]; 
 

 
     $scope.rowSelected = function(row) 
 
     { 
 
      console.log(row); 
 
     }; 
 
    }]); 
 
    </script>

Answer 2

Sie können vielleicht so etwas wie diese,

HTML:

<input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-change="checkSubmit(item.serial,item.name,item.id,item.on_off)"> 

JS:

function checkSubmit(serial,name,id,on_off){ 

... /*Processing can happen now with the parameters obtained*/ ...}

HINWEIS: Der Fall der Variablen kann

Answer 3

Einige Modifikation der von Natiq vorgesehen Antwort: Danach können Sie Zeilendaten wie folgt abrufen.

Ändern diese Zeile

<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-model="item.selected" ng-change="rowSelected(item)"></td> 

zu

<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-model="item.selected" ng-click="rowSelected(item)"></td> 

Die Modifikation von ng-change zu ng-click. Dies wird Ihr Problem lösen, wenn der erste Klick nicht funktioniert, aber nur die nachfolgenden Klicks funktionieren, basierend auf den geposteten Kommentaren. Mit ng-click wird sichergestellt, dass jeder Klick erkannt wird.