Angular Get Selected Value von Checkbox

Ich kann nicht scheinen, das ausgewählte Element aus einem Eingabe-Kontrollkästchen zu bekommen.Angular Get Selected Value von Checkbox

<ul> 
    <li ng-repeat='shoe in shoebox'> 
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'> 
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label> 
    </li> 
    <button ng-click='whatIsChecked(shoe.selected)'>Apply</button> 
</ul>

Da ist in meinem Controller:

$scope.whatIsChecked = function(selectedThing) { 
    console.log(selectedThing); 
};

Die oben genannten Erträge undefined.

Die Listenelemente werden korrekt angezeigt, aber das shoe.name oder das überprüfte Element scheint nicht von der ng-model gespeichert zu sein.

Quelle

2017-04-24 bruh

Sind die Daten in ** ** Schuhkarton-Updates, wenn Sie es ändern? –

Ich würde die Daten im Schuhkarton nicht ändern. Momentan ist es eine Sammlung von verschiedenen Schuhen, die korrekt gedruckt werden. Wenn ich das entsprechende Kontrollkästchen auswähle, möchte ich, dass dieses Element im Modell gespeichert wird. Hoffe, dass Ihre Frage beantwortet – bruh

Die Variable shoe ist nur in ng-repeat Block gültig.

Wenn Sie möchten, was ausgewählt ist, sollten Sie versuchen filter.

UPD: Da Sie die ausgewählte Eigenschaft nicht haben, sollten Sie die ausgewählten Elemente woanders halten, indem die ng-click Ereignis zu feuern.

siehe unten Code-Snippet.

angular.module("app", []) 
 
    .controller("myCtrl", function($scope) { 
 
    
 
    $scope.checkedShoes = []; 
 
    
 
    $scope.shoebox = [{ 
 
     name: 'shoe1' 
 
     }, 
 
     { 
 
     name: 'shoe2' 
 
     }, 
 
     { 
 
     name: 'shoe3' 
 
     }, 
 
     { 
 
     name: 'shoe4' 
 
     } 
 
    ]; 
 
    
 
    $scope.save = function(e, shoe) { 
 
     if (e.target.checked) { 
 
     $scope.checkedShoes.push(shoe); 
 
     } else { 
 
     var index = $scope.checkedShoes.indexOf(shoe); 
 
     if(index > -1) { 
 
      $scope.checkedShoes.splice(index, 1); 
 
     } 
 
     } 
 
     
 
    }; 
 
    
 
    $scope.whatIsChecked = function() { 
 
     //var selected = $scope.shoebox.filter(function(item) { 
 
     // return item.selected === true; 
 
     //}); 
 
     
 
     console.log($scope.checkedShoes); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app="app" , ng-controller="myCtrl"> 
 
    <ul> 
 
    <li ng-repeat='shoe in shoebox'> 
 
     <input type='checkbox' ng-click="save($event, shoe)" id='shoe-{{shoe.name}}'> 
 
     <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label> 
 
    </li> 
 
    <button ng-click='whatIsChecked()'>Apply</button> 
 
    </ul> 
 
</div>

Quelle

2017-04-24 02:19:39 Pengyy

Ich kann Ihr Schnipsel laufen und es funktioniert gut, aber - wenn ich versuche - ich bekomme ein leeres Array '[]' zurückgegeben von 'console.log (ausgewählt)'. Ich denke, weil ich nicht jeden Schuh explizit auf falsch setze, wie du es in deinem Beispiel getan hast. Könnte dies geändert werden, um keine "ausgewählte" Eigenschaft in jedem Schuhobjekt zu benötigen? – bruh

@bruh also du meinst die ausgewählten informationen nicht in deiner 'shoebox' zu speichern? – Pengyy

Ich habe 'shoe.selected' als Beispielnamen für ng-model verwendet. Ich habe nicht wirklich eine 'ausgewählte' Eigenschaft in jedem Schuhobjekt (wie Sie in Ihrem Beispiel haben). * Ich glaube * das ist der Grund, warum ich ein leeres Array bekomme, wenn ich versuche, 'console.log (ausgewählt) ' – bruh

Sie können die markierten Elemente erhalten einen angular.Foreach mit es leicht wird, wenn Sie mehrere Elemente überprüft haben.

$scope.checkedItems = []; 
     angular.forEach($scope.shoebox, function(value, key) { 
      if (value.selected) 
      $scope.checkedItems.push(value.name); 
});

Demo

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.shoebox = [{ 
 
    name: 'Reboke', 
 
    selected: false 
 
    }, { 
 
    name: 'woodlands', 
 
    selected: false 
 
    }, { 
 
    name: 'Nike', 
 
    selected: false 
 
    }, { 
 
    name: 'Fila', 
 
    selected: false 
 
    }]; 
 
    $scope.checkedItems = function() { 
 
    $scope.checkedItems = []; 
 
    angular.forEach($scope.shoebox, function(value, key) { 
 
     if (value.selected) 
 
     $scope.checkedItems.push(value.name); 
 
    }); 
 

 
    } 
 
});

<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS </title> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="https://code.angularjs.org/1.4.7/angular.js"></script> 
 
</head> 
 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
    <ul> 
 
    <li ng-repeat='shoe in shoebox'> 
 
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'> 
 
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label> 
 
    </li> 
 
    <button ng-click='checkedItems()'>Apply</button> 
 
    Checked items are: {{checkedItems}} 
 
</ul> 
 
     
 
</body> 
 
</html>

Quelle

2017-04-24 02:22:21 Sajeetharan

Angular Get Selected Value von Checkbox

Antwort

Verwandte Themen