Binden eines eindeutigen Werts aus einer Tabelle an das ng-Modell eines Kontrollkästchens

Question

Ich habe eine Tabelle (die mit den Daten gefüllt ist, die vom Back-End mit ng-repeat empfangen werden.) Jede der Zeilen hat ein Kontrollkästchen und Wenn das Kontrollkästchen aktiviert ist (mehrere), möchte ich eine Anfrage an den Server senden, um die Zeilen zu löschen. Dazu möchte ich mein Kontrollkästchen an ein eindeutiges Feld in meiner Tabelle binden, bekomme aber nicht die richtige Syntax. Ich habe versucht, die folgenden Optionen, die ich in SO gelesen, aber nichts scheint zu funktionieren.

<input type="checkbox" ng-model="demo.Custid" >//this replaced the value in the table with true or false. 

    <input type="checkbox" ng-model="formData.checkboxes[demo.Custid]" >//this gave me values in the below format {"12500":true,"125001":false} 

Gibt es trotzdem i den Wert der Kunden-ID (in diesem Fall) direkt gebunden an das ng-Modell eindeutig bekommen? Ich mag diese Werte erhalten und eine Anfrage an den Server zu senden, um die Daten zu löschen aus der Tabelle für den entsprechenden Kunden.

.controller('Controller1',function($scope,$rootScope,$routeParams){ 
$scope.name = 'Controller1'; 
$scope.params = $routeParams; 
$scope.formData = { 
      checkboxes: {} 

        }; 
$scope.demos = [ 
       { 'Account':'abc.com', 
        'Custid': 125000, 
        }, 
        {'Account':'abc.com', 
        'Custid': 125001, }, 
        { 'Account':'abc.com', 
        'Custid': 125002,} 
       ] 


     }) 

Ich bin neu zu eckigen js und jede Hilfe/Zeiger wäre wirklich hilfreich.

Answer 1

Verwenden Sie ng-klicken.

Sie haben bereits eine ng-repeat-Schleife über Demo. $ Scope.demos und demo.Custid sehen, ich nehme an, Sie haben gerade

ng-repeat = "Demo in Demos".

Jetzt nur passieren, dass demo.Custid auf eine Funktion, über den Umfang definiert mit ng-click = „myfunction (demo.Custid)“

angepasst ich Ihren Code ein wenig, um es für mich leicht zu machen, aber diese sollte ziemlich offensichtlich sein:

Edit: nur wurde mir klar, ich eine Winkel 1.01 Vorlage in jsfiddle wurde mit diesem Code zu erstellen, werde ich es verlassen, aber hier ist eine fiddle zu einem Arbeitsbeispiel in AngularJS 1.5.5

index.html

<div ng-controller="Controller1"> 
    <input type="submit" ng-click="sendToBackend()"> 
    {{name}} 
    <table> 
    <thead><tr><td>Select</td><td>Customer</td></tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="demo in demos"> 
     <td><input type="checkbox" ng-click="addToList(demo.Custid)"></td> 
     <td>{{demo.Custid}}</td> 
     </tr> 
    </tbody> 
    </table> 
    <ul> 
    <li ng-repeat="check in checkboxes">{{check}}</li> 
    </ul> 
</div> 

myapp.js

var myApp = angular.module('myApp', []); 

function Controller1($scope) { 
    $scope.name = 'Controller1'; 
    $scope.checkboxes = []; 
    $scope.demos = [{Account: 'abc.com',Custid: 125000,}, 
        {Account: 'abc.com',Custid: 125001,}, 
        {Account: 'abc.com',Custid: 125002,}]; 
    $scope.addToList = function(id) { 
     $scope.checkboxes.push(id); 
    }; 
    $scope.sendToBackend = function() { 
     alert("sending " + $scope.checkboxes.length + " items to backend"); 
    }; 

}; 

Von hier an Sie sollten in der Lage sein, alles zu tun, was man will. Wenn Sie spezifischere Fragen haben, schießen Sie!