angular之增删改查
来源：互联网 发布：初级java程序员简历 编辑：程序博客网 时间：2024/05/07 18:03
<!DOCTYPE html><html lang="en" ng-app="app"><head> <meta charset="UTF-8"> <title>angular增删改查</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <style> input.ng-invalid { border: 1px solid red; } input.ng-valid { border: 1px solid green; } tr.odd{ background: #f6f6f6; } tr.even{ background: #f0f0f0; } tr.actBg{ background: #dddddd; } </style></head><body ng-controller="ctrl"><div class="container" style="margin: 40px auto;"> <!--新增--> <div class="row" style="border: 1px #ddd solid; padding: 10px 0;"> <div class="col-md-12"> <h2>新增信息</h2> <form name="myForm" novalidate ng-submit="submitDate()"> <div class="form-group"> <label for="Name">姓名（必填）老王不翻墙</label> <input type="text" class="form-control" id="Name" placeholder="Name" name="user" ng-model="user" required> </div> <div class="form-group"> <label for="Phone">手机号（必填）13012365479</label> <input type="number" class="form-control" id="Phone" placeholder="Phone" name="phone" ng-model="phone" ng-minlength="11" ng-maxlength="11" required> </div> <div class="form-group"> <label for="Email">邮箱（必填）123456789@qq.com</label> <input type="email" class="form-control" id="Email" placeholder="Email" name="email" ng-model="email" required> </div> <div class="form-group"> <label for="Url">微博地址（必填）http://www.laowang.com</label> <input type="url" class="form-control" id="Url" placeholder="Url" name="url" ng-model="url" required> </div> <div class="form-group"> <p>性别：{{sex}}</p> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" ng-model="sex" value="男生"> 男 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" ng-model="sex" value="女生"> 女 </label> </div> <div class="form-group"> <p>兴趣：{{selected}}--{{selectedTags}}--{{selectedObj}}</p> <p>已选(str)：{{strInterest}}</p> <label class="checkbox-inline" ng-repeat="it in interestData"> <input type="checkbox" id="{{it.id}}" data-total="{{it.total}}" name="{{it.name}}" value="{{it.name}}" ng-checked="isSelected(it.id)" ng-click="updateSelection($event,it.id)"> {{it.name}} </label> </div> <div class="form-group"> <label> 家乡 </label> <select class="form-control" ng-model="hometown" name="hometown"> <option ng-repeat="home in homeArr">{{home}}</option> </select> </div> <div class="form-group"> <textarea class="form-control" name="state" rows="3" ng-model="state" placeholder="备注说明"></textarea> </div> <button type="submit" ng-disabled="myForm.$invalid" class="btn btn-success">提交</button> </form> </div> </div> <!--查询列表--> <div class="row" style="border: 1px #ddd solid; padding: 20px 0;"> <div class="col-md-12"> <h2>查询列表</h2> <div class="col-md-12" style="padding: 20px;"> <div class="form-inline"> <div class="form-group"> <label> 显示条数 </label> <select class="form-control" ng-model="count" name="count"> <option ng-repeat="page in pages">{{page}}</option> </select> </div> <div class="form-group" style="margin-left: 30px;"> <label for="SearchName"> 根据姓名筛选 : </label> <input type="text" class="form-control" id="SearchName" placeholder="SearchName" ng-model="SearchName"> </div> <div class="form-group" style="margin-left: 50px;"> <label for="SearchID"> 根据ID查询 : </label> <input type="text" class="form-control" id="SearchID" placeholder="SearchID" ng-model="Searchid"> </div> <button type="button" class="btn btn-primary" ng-click="Search()">查询</button> </div> </div> <p>已选择（传后台data）：{{choseArr}}</p> <p>已选择（传后台data）：{{choseArrStr}}</p> <p>根据Id删除选中：{{selectedId}}</p> <p> <button class="btn btn-primary" ng-click="BatchDelete()">批量删除</button> </p> <table class="table table-bordered"> <thead> <tr> <th> <!--master:; arrData:遍历的数据--> 全选 <input type="checkbox" ng-checked="isChecked" ng-model="master" ng-click="all(master,arrData)"> </th> <th>序号<span ng-click="sortID=!sortID">--升降--</span></th> <th>ID</th> <th>姓名</th> <th>手机号</th> <th>邮箱</th> <th>微博地址</th> <th>性别</th> <th>兴趣</th> <th>家乡</th> <th>备注说明</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="item in arrData | limitTo:count | filter:SearchName | filter:SearchID | orderBy: 'id':sortID" ng-class-odd="{{odd}}" ng-class-even="{{even}}" ng-click="selectBg($index)" ng-class="{'actBg':$index==actI}"> <td> <input id={{item}} type="checkbox" ng-model="x" ng-checked="master" ng-click="chk(item,x,$event)"> </td> <td>{{$index+1}}</td> <td>{{item.id}}</td> <td>{{item.user}}</td> <td>{{item.phone}}</td> <td>{{item.email}}</td> <td>{{item.url}}</td> <td>{{item.sex}}</td> <td>{{item.interest}}</td> <td>{{item.hometown}}</td> <td>{{item.state}}</td> <td> <button type="button" class="btn btn-info" ng-click="Update(item.id)">修改</button> <button type="button" class="btn btn-danger" ng-click="Delete(item.id)">删除</button> </td> </tr> </tbody> </table> </div> </div></div><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script> var app = angular.module('app', []); app.controller('ctrl', ['$scope', '$http', '$window','$location', function ($scope, $http, $window,$location) { //table背景色 $scope.odd = 'odd'; $scope.even = 'even'; $scope.selectBg = function(index){ $scope.actI = index; }; //模拟数据 $scope.arrData = [ { user: '张三', id: '0321', phone: '13058712458', email: '762279415@qq.com', url: 'http://www.test.com', sex: '男', interest: '旅游,运动', hometown: '北京', state: '备注说明1' }, { user: '李四', id: '0284', phone: '13058712424', email: '762279415@qq.com', url: 'http://www.test.com', sex: '女', interest: '旅游,运动', hometown: '上海', state: '备注说明2' }, { user: '王五', id: '5497', phone: '13058712427', email: '762279415@qq.com', url: 'http://www.test.com', sex: '男', interest: '旅游,运动', hometown: '深圳', state: '备注说明3' }, { user: '赵六', id: '2347', phone: '13058712491', email: '762279415@qq.com', url: 'http://www.test.com', sex: '男', interest: '旅游,运动', hometown: '广州', state: '备注说明4' }, { user: '田七', id: '9528', phone: '13058712443', email: '762279415@qq.com', url: 'http://www.test.com', sex: '男', interest: '旅游,运动', hometown: '广西', state: '备注说明5' }, { user: '八妹', id: '4512', phone: '13058712459', email: '762279415@qq.com', url: 'http://www.test.com', sex: '女', interest: '旅游,运动', hometown: '海南', state: '备注说明6' }, ]; //家乡数据 $scope.homeArr = ['北京', '广西', '广州', '湖北', '上海', '海南']; //显示条数 $scope.pages = [5, 10, 20, 50, 'All']; //爱好数据 $scope.interestData = [ {id: 1, name: '爬山', total: '16次'}, {id: 2, name: '游泳', total: '10次'}, {id: 3, name: '购物', total: '15次'}, {id: 4, name: 'K歌', total: '17次'}, {id: 5, name: '汽车', total: '19次'}, {id: 6, name: '遛狗', total: '11次'}, {id: 7, name: '游戏', total: '16次'}, {id: 8, name: '电影', total: '12次'}, ]; //爱好多选 $scope.selected = [];//存放id $scope.selectedTags = [];//存放name $scope.selectedObj = [];//[{id:'',name:'',total:''}] $scope.strInterest = '';//存放选择的数组转字符串 //根据id增删 -----参考： http://www.cnblogs.com/CheeseZH/ var updateSelected = function (action, id, name, total) { if (action == 'add' && $scope.selected.indexOf(id) == -1) { $scope.selected.push(id); $scope.selectedTags.push(name); //$scope.strInterest = $scope.selectedTags.join(','); $scope.selectedObj.push({id: id, name: name, total: total}); } if (action == 'remove' && $scope.selected.indexOf(id) != -1) { var idx = $scope.selected.indexOf(id);//根据数组某个值删除 $scope.selected.splice(idx, 1); $scope.selectedTags.splice(idx, 1); $scope.selectedObj.splice(idx, 1); //$scope.strInterest = $scope.strInterest.replace(name + ',','');//取消选中 } $scope.strInterest = $scope.selectedTags.join(',');//转str //console.log($scope.strInterest); }; $scope.updateSelection = function ($event, id) { var checkbox = $event.target;//获取当前this var action = (checkbox.checked ? 'add' : 'remove'); updateSelected(action, id, checkbox.name, checkbox.dataset.total);//xxx.dataset.total读取data-total='' }; $scope.isSelected = function (id) { return $scope.selected.indexOf(id) >= 0; // -1>+=0 false }; //新增数据 $scope.submitDate = function () { if ($scope.myForm.$valid) { // 正常提交 console.log('valid'); var inputDate = { user: $scope.user, id: Math.round((Math.random() * 10) * (Math.random() * 10) * 6), phone: $scope.phone, email: $scope.email, url: $scope.url, sex: $scope.sex, interest: $scope.strInterest, hometown: $scope.hometown, state: $scope.state }; $scope.arrData.unshift(inputDate); alert('新增成功'); //http服务:post/get /*$http.post('url',inputDate).success(function (res) { //成功 }).error(function (err) { //失败 }); $http.get('url',{params:inputDate}).success(function (res) { //成功 }).error(function (err) { //失败 });*/ } else { console.log('invalid'); } }; //按ID升降排序 $scope.sortID = 0; //按ID查询 $scope.Search = function () { $scope.SearchID = $scope.Searchid; }; //按ID修改 $scope.Update = function (id) { console.log(id); //可根据页面url传值 url?id=123, ---$location.search(id)获取 //传当前id后台查询更新 /*$http.post('url',{id:id}).success(function(res){})*/ }; //按ID删除 $scope.Delete = function (id) { if (id) { var con = $window.confirm("确定要删除吗?"); if (con == true) { alert("$http服务传当前id后台删除"); //传当前id后台删除 } else { alert("不删除"); } } }; //多选批量删除----参考：http://www.cnblogs.com/wohenxion/p/4624218.html $scope.choseArr = [];//定义数组用于存放前端显示 $scope.choseArrStr = [];//定义数组用于存放前端显示 var str = "";//字符串 var flag = '';//是否点击了全选，是为a $scope.x = false;//默认未选中 $scope.selectedId = [];//存放id $scope.all = function (c, v) {//全选 console.log(c); if (c == true) { $scope.x = true; //$scope.choseArrStr = v; //var objs =[{a:1},{a:2}]; //v：传入的数据 angular.forEach(v, function (data, index, array) { //data等价于array[index] //console.log(data.a+'='+array[index].a); //console.log(data.id); //console.log(array); if ($scope.selectedId.indexOf(data.id) == -1) { $scope.selectedId.push(data.id); $scope.choseArr.push({id: data.id});//截取id {{id:''}} $scope.choseArrStr.push(data.id); } }); } else { $scope.x = false; $scope.choseArrStr = []; $scope.choseArr = []; $scope.selectedId = []; //$scope.choseArr.length = 0;//清空数组 } flag = 'a';//全选状态 }; //数组根据某个值增删 var SelectedUpdateId = function (id, action) { if (action == 'add' && $scope.selectedId.indexOf(id) == -1) { $scope.selectedId.push(id); $scope.choseArr.push({id: id}); } if (action == 'remove' && $scope.selectedId.indexOf(id) != -1) { var idx = $scope.selectedId.indexOf(id); $scope.selectedId.splice(idx, 1); $scope.choseArr.splice(idx, 1); } }; ////单选或者多选 $scope.chk = function (z, x, $event) { var checkbox = $event.target;//获取当前this var action = (checkbox.checked ? 'add' : 'remove'); if (flag == 'a') {//在全选的基础上操作 str = $scope.choseArrStr.join(',') + ',';//数组转字符串 //console.log('全选的基础上取消单个'); SelectedUpdateId(z.id, action); //$scope.isChecked = false; } if (x == true) {//选中 str = str + z.id + ','; //console.log('选中单个'); //console.log(z);//obj选中的单条数据 //console.log(x);//true SelectedUpdateId(z.id, action); } else { str = str.replace(z.id + ',', '');//取消选中 //console.log('取消单个选中'); SelectedUpdateId(z.id, action); } $scope.choseArrStr = (str.substr(0, str.length - 1)).split(','); //判断显示全选 //console.log($scope.choseArr.length); //console.log($scope.arrData.length);//table数据总数 if ($scope.choseArr.length == $scope.arrData.length) { $scope.master = true; flag = 'a';//全选状态 }else { //$scope.master = false; flag = '';//取消全选状态 } }; //批量删除 $scope.BatchDelete = function () { if ($scope.choseArr[0] == "" || $scope.choseArr.length == 0) {//没有选择一个的时候提示 alert("请至少选中一条数据在操作！"); return; } var con = $window.confirm("确定要删除吗?"); if (con == true) { for (var i = 0; i < $scope.choseArr.length; i++) { console.log($scope.choseArr[i]);//遍历选中的id } alert("已删除"); //传当前id后台删除 } else { alert("不删除"); } }; }])</script></body></html> 0 0
- angular之增删改查
- angular增删查改
- Angular增删查改
- Angular增删改查
- angular 增删改查
- angular 增删改查
- angular实现增删改查
- Angular增删改查练习
- Angular js 开发系统之增删查改
- angular JS 实现增删改查
- Angular实现的增删改查
- angular的增删改查综合使用
- angular.js 表格增删改查
- angular.js 增删改查练习1
- angular Js的增删改查
- angular.js 增删改查练习2
- Angular对标签的增删改查
- Hibernate 之 增删改查
- 前端学习之路JS（01）-基础语法
- PHP捕捉普通异常和致命错误
- 15天玩转redis —— 第二篇 基础的字符串类型
- 使用三种方法求两个整数的最大公约数
- 15天玩转redis —— 第三篇 无敌的列表类型
- angular之增删改查
- 2017年,身为Android开发的你必须要掌握的热门开源
- 15天玩转redis —— 第四篇 哈希对象类型
- 15天玩转redis —— 第五篇 集合对象类型
- Hdu 2838 Cow Sorting 树状数组
- 实现全屏切换效果
- Mysql复制关系
- 15天玩转redis —— 第六篇 有序集合类型
- 北京共产党早期组织的三个主要创始人之一张申府
