Angularjs，对表中选定的复选框应用操作 [英] Angularjs, Applying Action on Selected Checkboxes in Table

查看：22
本文介绍了Angularjs，对表中选定的复选框应用操作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试学习 AngularJS 并且我正在实现这个复选框，当我从网格中删除一些复选框并单击删除按钮时，应从选定的复选框中删除表中的数据.

我尝试过，但不知道如何实现它.

请在Plunker上查看我的这段代码.http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=preview

如果你分叉并给出上述Plunker的工作示例，那就太好了.

解决方案

一个简单的方法是将您的学生列表更改为:

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

与:

在视图中.通过将 filter 注入控制器，您可以重写 删除函数以:

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

这里是完整的代码:

(function (app, ng) {'使用严格';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({罗尔诺:$scope.new_rollno，名称:$scope.new_name，大学:$scope.new_uni});$scope.new_rollno = $scope.new_name = $scope.new_uni = '';};$scope.remove = function(){$scope.students = filterFilter($scope.students, function (student) {返回 !student.selected;});};}]);}(angular.module('app', []), angular));

/* 样式在这里 */桌子{宽度:100%；}表,th,td{边框:1px纯黑色；}.颜色{背景颜色:浅灰色；}.color2{背景颜色:白色；}#标题{背景颜色:黑色；白颜色;}tr:悬停{背景颜色:深蓝色；白颜色;字体粗细:粗体；}#images img{边距顶部:10px；}#img1{宽度:33.4%；}#img2{宽度:66%；高度:255px；}#表格1{边距顶部:10px；}标签{显示:块；底边距:5px；边距顶部:5px；}按钮{边距顶部:5px；填充:5px；}

<html ng-app="app"><头><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script><元字符集=utf-8/><title>JS Bin</title><身体><div><label>搜索:</label><input type="search" ng-model="search" placeholder="Enter to Search">

<div id="table1" ng-controller="TableCtrl"><table cellpadding="0" border="0" cellspacing="0"><第>卷号:</th><th>学生姓名:</th><th>大学:</th></tr><tr class="color2" ng-repeat="student in student | 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><div><label>Rollno:</label><input type="number" ng-model="new_rollno"><br><标签>名称:</label><input type="text" ng-model="new_name"><br><label>大学:</label><input type="text" ng-model="new_uni"><br><button ng-click="save()">保存</button>

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

</html>

Im trying to Learn AngularJS and im implementing this Checkboxes that when i some checkboxes from the Grid and click the Remove Button then the Data from Table Should Be removed of Selected CheckBoxes.

I tried but cant figure out how to implement it.

Please see my this code on Plunker. http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=preview

It would be nice, if you fork and Give Working Example of the Above Plunker.

解决方案

An easy way would be to change your students list to:

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

with:

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

in the view. With injecting filter into the controller, you can then rewrite the remove function to:

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

here is full code: 

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

这篇关于Angularjs，对表中选定的复选框应用操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆