zoukankan      html  css  js  c++  java
  • angular的表格

    <script>
    var app=angular.module("app",[]);
    <!--定义angular的控制器 -->
    app.controller("ctr",function ($scope) {
    <!--定义数据-->
    var arr=[{
    id:"1235",
    name:"苹果8",
    price:"5000",
    num:1,
    check:false
    }]
    <!--数据的绑定 -->
    $scope.col="id";
    $scope.data=arr;
    $scope.shu="";
    $scope.desc=false;
    <!--删除-->
    $scope.shan=function (index) {
    alert("是否删除");
    $scope.data.splice(index,1);
    };
    <!--批量删除 -->
    $scope.chu=function () {
    var a=confirm("确定删除");
    if(a==true){
    var arr=[];
    for(var i=0;i<$scope.data.length;i++){ if($scope.data[i].check==false){ arr.push($scope.data[i]); } } $scope.data=arr; } }; <!--排序 --> $scope.hh1=function (col) { if(col==$scope.col){ $scope.desc=!$scope.desc; } $scope.col=col; } <!-- 删除全部--> $scope.st=false; $scope.dian=function () { if($scope.st==true){ for (var i=0;i<$scope.data.length;i++){ $scope.data[i].check=true; } }else{ for(var i=0;i<$scope.data.length;i++){ $scope.data[i].check=false; } } } <!-- 每个复选框--> $scope.fu=function () { var fale=0; for (var i=0;i<$scope.data.length;i++){ if($scope.data[i].check==true){ fale++; } } if(fale==$scope.data.length){ $scope.st=true }else{ $scope.st=false } } })</script>
    <input type="text" ng-model="shu">  <button ng-click="chu()">批量删除</button>
    <!--table的定义-->
    <table>
    <!--tr的点击事件-->
    <tr ng-click="dian()">
    <td><input type="checkbox" ng-click="dian()" ng-model="st"></td>
    <td ng-click="hh1('id')" id="t1">商品编号</td>
    <td ng-click="hh1('name')" id="t2">商品名称</td>
    <td ng-click="hh1('price')" id="t3">商品价格</td>
    <td ng-click="hh1('num')" id="t4">商品库存</td>
    <td>数据操作</td>
    </tr>
    <!--遍历数组,渲染到页面上-->
    <!--一些过滤器-->
    <tr ng-repeat="item in data | filter:shu | orderBy:col:desc">
    <td><input type="checkbox" ng-click="fu()" ng-model="item.check"></td>
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.price|currency:"¥"}}</td>
    <td>{{item.num}}</td>
    <td><button ng-click="shan($index)">删除</button></td>
    </tr>
    </table>
    
    
  • 相关阅读:
    升级linux bash
    vim关键字自动补全
    linux bash shell之变量替换::=句法、=句法、:句法、句法、=?句法、?句法、:+句法、+句法
    使用Bash编写Linux Shell脚本7.复合命令
    使用Bash编写Linux Shell脚本5.变量
    使用Bash编写Linux Shell脚本8.调试和版本控制
    Perl之单引号\双引号的字符串直接量
    linux bash shell 中的单引号和双引号
    使用Bash编写Linux Shell脚本6.表达式
    Vim的行号、语法显示等设置,即.vimrc文件的配置
  • 原文地址:https://www.cnblogs.com/zzwerzi/p/7559896.html
Copyright © 2011-2022 走看看