Angularjs, Applicazione di azioni sulle caselle di controllo selezionate nella tabella

Sto cercando di imparare AngularJS e im implementando questa casella di controllo che quando si selezionano alcune checkbox dalla griglia e si fa clic sul pulsante Rimuovi, i dati dalla tabella devono essere rimossi dai checkbox selezionati.Angularjs, Applicazione di azioni sulle caselle di controllo selezionate nella tabella

Ho provato ma non riesco a capire come implementarlo.

Si prega di vedere il mio questo codice su Plunker. http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=preview

Sarebbe bello, se si biforca e dare esempio di lavoro di Above Plunker.

fonte

2013-06-28 Sizzling Code

Un modo semplice sarebbe quella di modificare l'elenco agli studenti di:

$scope.students = [ 
    {Rollno: "1122",Name: "abc",Uni: "res", selected: false}, 
    {Rollno: "2233",Name: "def",Uni: "tuv", selected: false}, 
    {Rollno: "3344",Name: "ghi",Uni: "wxy", selected: false} 
];

con:

<input type="checkbox" ng-model="student.selected">

nella vista. Con l'iniezione filter nel controller, è possibile riscrivere la funzione remove a:

$scope.remove = function(){ 
    $scope.students = filterFilter($scope.students, function (student) { 
    return !student.selected; 
    }); 
};

qui è il codice completo:

(function (app, ng) { 
 
    'use strict'; 
 

 
    app.controller('TableCtrl', ['$scope', 'filterFilter', function($scope, filterFilter) { 
 
    $scope.students = [ 
 
     {Rollno: "1122",Name: "abc",Uni: "res", selected: false}, 
 
     {Rollno: "2233",Name: "def",Uni: "tuv", selected: false}, 
 
     {Rollno: "3344",Name: "ghi",Uni: "wxy", selected: false} 
 
    ]; 
 

 
    $scope.save = function(){ 
 
     $scope.students.push({ 
 
     Rollno: $scope.new_rollno, 
 
     Name: $scope.new_name, 
 
     Uni: $scope.new_uni 
 
     }); 
 

 
     $scope.new_rollno = $scope.new_name = $scope.new_uni = ''; 
 
    }; 
 

 
    $scope.remove = function(){ 
 
     $scope.students = filterFilter($scope.students, function (student) { 
 
     return !student.selected; 
 
     }); 
 
    }; 
 
    }]); 
 
}(angular.module('app', []), angular));

/* Styles go here */ 
 

 
table 
 
{ 
 
    width: 100%; 
 

 
} 
 
table,th,td 
 
{ 
 
    border: 1px solid black; 
 
} 
 
.color 
 
{ 
 
    background-color: lightgray; 
 
} 
 
.color2 
 
{ 
 
    background-color: white; 
 
} 
 
#heading 
 
{ 
 
    background-color: black; 
 
    color: white; 
 
} 
 
tr:hover 
 
{ 
 

 
    background-color:darkblue; 
 
    color: white; 
 
    font-weight: bold; 
 
} 
 
#images img 
 
{ 
 

 
    margin-top: 10px; 
 
} 
 
#img1 
 
{ 
 
    width: 33.4%; 
 
} 
 
#img2 
 
{ 
 
    width: 66%; 
 
    height: 255px; 
 
} 
 
#table1 
 
{ 
 
    margin-top: 10px; 
 
} 
 
label 
 
{ 
 
    display: block; 
 
    margin-bottom: 5px; 
 
    margin-top: 5px; 
 
} 
 
button 
 
{ 
 
    margin-top: 5px; 
 
    padding: 5px; 
 
}

<!DOCTYPE html> 
 
<html ng-app="app"> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> 
 
<meta charset=utf-8 /> 
 
<title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div> 
 
     <label>Search:</label> 
 
     <input type="search" ng-model="search" placeholder="Enter to Search"> 
 
    </div> 
 

 
    <div id="table1" ng-controller="TableCtrl"> 
 
     <table cellpadding="0" border="0" cellspacing="0"> 
 
     <tr id="heading"> 
 
      <th>Roll NO:</th> 
 
      <th>Student Name:</th> 
 
      <th>University:</th> 
 
     </tr> 
 

 
     <tr class="color2" ng-repeat="student in students | filter:search | filter:new_search"> 
 
      <td>{{student.Rollno}} <input type="checkbox" ng-model="student.selected"> </td> 
 
      <td>{{student.Name}}</td> 
 
      <td>{{student.Uni}} <button ng-click="remove($index)">x </button></td> 
 
     </tr> 
 
     </table> 
 

 
     <div> 
 
     <label>Rollno:</label> 
 
     <input type="number" ng-model="new_rollno"> <br> 
 
     <label>Name:</label> 
 
     <input type="text" ng-model="new_name"><br> 
 
     <label>University:</label> 
 
     <input type="text" ng-model="new_uni"><br> 
 
     <button ng-click="save()">Save</button> 
 
     </div> 
 

 
     <div style="float: right; margin-right: 300px;margin-top: -200px;"> 
 
     <button ng-click="remove($index)">Remove</button> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

fonte

2013-06-28 07:33:53 Yoshi

Yoshi la soluzione sembra essere perfetto, ma è meglio di non assegnare $ scope.students a un nuovo valore nella funzione remove in quanto poi ricreare tutti gli elementi ng-repeat da zero quindi è meglio semplicemente splicing degli elementi dagli array degli studenti per evitare di ricreare nuovamente ng-repeat. –

@Ajaybeniwal Per favore, puoi spiegare come farlo con Splice in altre risposte? –

@Ajaybeniwal Hai ragione. Duro personalmente aspetterei che il ridisegno diventasse un problema reale (poiché dipende molto dalla quantità di dati). Fino ad allora, userei 'filter' perché è * auto-descrittivo * da solo. – Yoshi

Angularjs, Applicazione di azioni sulle caselle di controllo selezionate nella tabella

risposta

Problemi correlati