Angularjs，在表上选择复选框应用动作 [英] Angularjs, Applying Action on Selected Checkboxes in Table

查看：123 发布时间：2016/4/7 23:22:36 javascript html angularjs angularjs-ng-repeat

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

问题描述

我试着去了解AngularJS和IM实现此复选框，当我从网格一些复选框，然后单击删除按钮，然后从表中的数据，应选择复选框去除。

我试过，但无法弄清楚如何实现它。

请参阅Plunker我这个code。
<一href=\"http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=$p$pview\">http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=$p$pview

上述Plunker的

这将是很好，如果你叉，并给予工作实例。

解决方案

一个简单的方法是改变你的学生名单为：

  $ scope.students = [
  {Rollno：，名1122：ABC，统一：资源，选择：假}，
  {Rollno：2233，产品名称：def，而统一：TUV，选择：假}，
  {Rollno：3344，产品名称：GHI，统一WXY，选择：假}
];

与

 ＆LT;输入类型=复选框NG模型=student.selected＆GT;

在视图中。与注射 过滤器 到控制器，你可以然后重写的删除的功能：

  $ scope.remove =功能（）{
  $ scope.students = filterFilter（$ scope.students，功能（学生）{
    返回student.selected！;
  }）;
};

这里到处是code：

（功能（应用程序，NG）{\r
  使用严格的;\r
\r
  app.controller（'TableCtrl'，['$范围，filterFilter'，函数（$范围，filterFilter）{\r
    $ scope.students = [\r
      {Rollno：，名1122：ABC，统一：资源，选择：假}，\r
      {Rollno：2233，产品名称：def，而统一：TUV，选择：假}，\r
      {Rollno：3344，产品名称：GHI，统一WXY，选择：假}\r
    ];\r
\r
    $ scope.save =功能（）{\r
      $ scope.students.push（{\r
        Rollno：$ scope.new_rollno，\r
        名称：$ scope.new_name，\r
        UNI：$ scope.new_uni\r
      }）;\r
\r
      $ scope.new_rollno = $ scope.new_name = $ scope.new_uni ='';\r
    };\r
\r
    $ scope.remove =功能（）{\r
      $ scope.students = filterFilter（$ scope.students，功能（学生）{\r
        返回student.selected！;\r
      }）;\r
    };\r
  }]）;\r
}（angular.module（应用，[]），角））;

 / *样式去这里* /\r
\r
表\r
{\r
  宽度：100％;\r
\r
}\r
表中，日，TD\r
{\r
  边框：1px的纯黑色;\r
}\r
。颜色\r
{\r
  背景颜色：浅灰色;\r
}\r
.color2\r
{\r
  背景颜色：白色;\r
}\r
＃标题\r
{\r
  背景色：黑色;\r
  颜色：白色;\r
}\r
TR：悬停\r
{\r
\r
  背景色：darkblue;\r
  颜色：白色;\r
  字体重量：大胆的;\r
}\r
#images IMG\r
{\r
\r
  的margin-top：10px的;\r
}\r
＃IMG1\r
{\r
  宽度：33.4％;\r
}\r
＃IMG2\r
{\r
  宽度：66％;\r
  高度：255px;\r
}\r
＃表格1\r
{\r
  的margin-top：10px的;\r
}\r
标签\r
{\r
  显示：块;\r
  保证金底：5像素;\r
  的margin-top：5像素;\r
}\r
按键\r
{\r
  的margin-top：5像素;\r
  填充：5像素;\r
}

＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=应用程序＆GT;\r
＆LT; HEAD＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;间的charset = UTF-8 /＆GT;\r
＆LT;标题＆GT; JS斌＆LT; /标题＆GT;\r
＆LT; /头＆GT;\r
＆LT;身体GT;\r
    ＆LT; DIV＆GT;\r
      ＆LT;标签＆gt;搜索：LT; /标签＆gt;\r
      ＆LT;输入类型=搜索NG-模式=搜索占位符=输入要搜索＆GT;\r
    ＆LT; / DIV＆GT;\r
\r
    ＆LT; DIV ID =表1NG控制器=TableCtrl＆GT;\r
      ＆LT;表格的cellpadding =0边界=0CELLSPACING =0＆GT;\r
        ＆LT; TR ID =标题＆GT;\r
          ＆LT;第i辊NO：＆LT; /第i\r
          ＆LT;第i个学生姓名：＆LT; /第i\r
          ＆LT;第i大学：LT; /第i\r
        ＆LT; / TR＆GT;\r
\r
        ＆LT; TR类=颜色2NG重复=学生的学生|过滤器：搜索|过滤器：new_search＆GT;\r
          ＆LT; TD＆GT; {{student.Rollno}}＆LT;输入类型=复选框NG模型=student.selected＆GT; ＆LT; / TD＆GT;\r
          ＆所述; TD＆GT; {{student.Name}}＆下; / TD＆GT;\r
          ＆LT; TD＆GT; {{student.Uni}}＆LT;按钮NG点击=删除（$指数）＆GT; X＆LT; /按钮＆GT;＆LT; / TD＆GT;\r
        ＆LT; / TR＆GT;\r
      ＆LT; /表＆gt;\r
\r
      ＆LT; DIV＆GT;\r
        ＆LT;标签＆gt; Rollno：LT; /标签＆gt;\r
        ＆LT;输入类型=数字NG-模式=new_rollno＆GT; ＆LT; BR＆GT;\r
        ＆LT;标签＆gt;名称：LT; /标签＆gt;\r
        ＆LT;输入类型=文本NG模型=NEW_NAME＆GT;＆LT; BR＆GT;\r
        ＆LT;标签＆gt;大学：LT; /标签＆gt;\r
        ＆LT;输入类型=文本NG模型=new_uni＆GT;＆LT; BR＆GT;\r
        ＆LT;按钮NG点击=保存（）＆GT;保存＆LT; /按钮＆GT;\r
      ＆LT; / DIV＆GT;\r
\r
      ＆LT; DIV的风格=浮动：权利;保证金右：300像素;的margin-top：-200px;＆GT;\r
        ＆LT;按钮NG点击=删除（$指数）＆GT;删除＆LT; /按钮＆GT;\r
      ＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT;

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屋！

查看全文

Angularjs，在表上选择复选框应用动作 [英] Angularjs, Applying Action on Selected Checkboxes in Table

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

Angularjs，在表上选择复选框应用动作 [英] Angularjs, Applying Action on Selected Checkboxes in Table

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭