Angularjs，對錶中選定的複選框應用操作

我試圖學習AngularJS和im實現這個複選框，當我從網格中的一些複選框，然後單擊刪除按鈕，然後從表中的數據應該被刪除的選定的複選框。Angularjs，對錶中選定的複選框應用操作

我試過但不知道如何實現它。

請在Plunker上查看我的這段代碼。 http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=preview

這將是很好，如果你叉和給予上述Plunker工作示例。

2013-06-28 Sizzling Code

一個簡單的方法是將你的學生名單更改爲：

$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">

視圖

。與注射filter到控制器中，然後你可以重寫刪除功能：

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

這裏是全碼：

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

來源

2013-06-28 07:33:53 Yoshi

耀您的解決方案似乎是完美的，但它是更好沒有將$ scope.students賦值給remove函數中的新值，因爲它會從頭開始重新創建所有的ng-repeat元素，所以最好從學生數組拼接元素，以避免重新創建ng-repeat。 –

@Ajaybeniwal 請你能解釋如何用Splice在其他答案中做到這一點？ –

@Ajaybeniwal你是對的。我個人會堅持下去，首先等待重繪成爲一個真正的問題（因爲這很大程度上取決於數據量）。在那之前，我會使用'filter'作爲*自描述性*。 – Yoshi

Angularjs，對錶中選定的複選框應用操作

回答

相關問題