Angularjs, zastosowanie akcji w wybranych polach wyboru w tabeli

Próbuję nauczyć się AngularJS i im wdrażać te pola wyboru, gdy po zaznaczeniu pól wyboru z siatki i kliknięciu przycisku usuwania, dane z tabeli powinny zostać usunięte z wybranych pól wyboru.Angularjs, zastosowanie akcji w wybranych polach wyboru w tabeli

Próbowałem, ale nie mogę wymyślić, jak go wdrożyć.

Proszę zobaczyć mój kod na Plunker. http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=preview

Byłoby miło, gdybyśmy widzieli i dali przykład roboczy wyżej wymienionego Plunkera.

Źródło

2013-06-28 Sizzling Code

Łatwym sposobem byłoby zmienić listę studentów do:

$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} 
];

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

w widoku. Z wstrzykiwaniem filter do sterownika, można następnie przepisać funkcję usuń do:

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

tutaj jest pełny kod:

(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>

Źródło

2013-06-28 07:33:53 Yoshi

Yoshi rozwiązanie wydaje się być idealne, ale jest lepiej nie przypisuj $ scope.students do nowej wartości w funkcji remove, ponieważ wtedy odtworzy wszystkie elementy ng-repeat od nowa, więc lepiej jest po prostu splicować elementy z tablicy studentów, aby uniknąć ponownego odtwarzania ng-repeat. –

@Ajaybeniwal Proszę wyjaśnić, jak to zrobić z Splice w innej odpowiedzi? –

@Ajaybeniwal Masz rację. Trudno osobiście najpierw zaczekać, aż przerysowanie stanie się prawdziwym problemem (ponieważ zależy to w dużej mierze od ilości danych). Do tego czasu używałbym 'filtru' dla samopotwierdzenia * samego siebie. – Yoshi

Angularjs, zastosowanie akcji w wybranych polach wyboru w tabeli

Odpowiedz

Powiązane problemy