angular事件关键字
来源：互联网 发布：无限极专属网络电视盒 编辑：程序博客网 时间：2024/05/29 18:07
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../../angular/angular.js"></script> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.products = [{ "id": 80, "name": "iPhone", "price": 5400, state: false }, { "id": 1200, "name": "ipad mini", "price": 2200, state: false }, { "id": 500, "name": "ipad air", "price": 2340, state: false }, { "id": 290, "name": "ipad", "price": 1420, state: false }, { "id": 910, "name": "imac", "price": 15400, state: false }]; //按照年龄进行过滤 $scope.search = ""; //下拉菜单过滤商品价格范围 $scope.productPrice = "--请选择--"; $scope.isShow = function(price) { if($scope.productPrice == "--请选择--") { return true; } else { var priceArr = $scope.productPrice.split("-"); var min = priceArr[0]; var max = priceArr[1]; if(price < min || price > max) { return false; } else { return true; } } } //全选反选 $scope.selectAll = false; $scope.selectAllFun = function() { if($scope.selectAll) { for(index in $scope.products) { $scope.products[index].state = true; } } else { for(index in $scope.products) { $scope.products[index].state = false; } } } //全不选 $scope.checkSelectAll = function() { var a = 0; for(index in $scope.products) { if(!$scope.products[index].state) { $scope.selectAll = false; } else { a++; } if(a == $scope.products.length) { $scope.selectAll = true; } else { $scope.selectAll = false; } } } //批量删除 $scope.delSelect = function() { var arr = []; for(index in $scope.products) { if($scope.products[index].state) { arr.push($scope.products[index].name); } } if(arr.length <= 0) { alert("请先选择删除项"); } else { if(window.confirm("确定删除吗？")) { for(index in arr) { for(index2 in $scope.products) { if(arr[index] == $scope.products[index2].name) { $scope.products.splice(index2, 1); } } } } } } //新增商品 $scope.formShow = false; $scope.formShowFun = function() { if($scope.formShow) { $scope.formShow = false; } else { $scope.formShow = true; $scope.updateShow = false; } } //提交新加商品进行验证 $scope.newId = ""; $scope.newName = ""; $scope.newPrice = ""; $scope.checkSub = []; $scope.divShow = false; $scope.sub = function() { $scope.checkSub = []; if($scope.newId == "" || $scope.newId == null) { $scope.checkSub.push("产品编号为空"); } else if(isNaN($scope.newId)) { $scope.checkSub.push("产品编号不是整数"); } if($scope.newName == "" || $scope.newName == null) { $scope.checkSub.push("产品名称为空"); } if($scope.newPrice == "" || $scope.newPrice == null) { $scope.checkSub.push("产品价格为空"); } else if(isNaN($scope.newPrice)) { $scope.checkSub.push("产品价格不是整数"); } if($scope.checkSub.length > 0) { $scope.divShow = true; } else { $scope.divShow = false; var newPro = { "id": parseInt($scope.newId), "name": $scope.newName, "price": parseInt($scope.newPrice), state: false }; $scope.products.push(newPro); } } //修改页面 $scope.updateShow = false; $scope.updateId = ""; $scope.updateName = ""; $scope.updatePrice = ""; $scope.updateShowFun = function(pro) { $scope.updateShow = true; $scope.formShow = false; $scope.updateId = pro.id; $scope.updateName = pro.name; $scope.updatePrice = pro.price; } $scope.updateSub = function() { $scope.updateArr = []; if($scope.updateName == "" || $scope.updateName == null) { $scope.updateArr.push("产品名称为空"); } if($scope.updatePrice == "" || $scope.updatePrice == null) { $scope.updateArr.push("产品价格为空"); } else if(isNaN($scope.updatePrice)) { $scope.updateArr.push("产品价格不是整数"); } //验证不满足 if($scope.updateArr.length > 0) { $scope.haha = true; } else { $scope.haha = false; for(index in $scope.products) { if(parseInt($scope.updateId) == $scope.products[index].id) { $scope.products[index].name = $scope.updateName; $scope.products[index].price = $scope.updatePrice; $scope.updateShow = false; } } } } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <h3>购物车</h3> <input type="text" size="10" placeholder="产品名称" ng-model="search" /> 产品价格 <select ng-model="productPrice"> <option>--请选择--</option> <option>0-2000</option> <option>2001-3000</option> <option>3001-4000</option> <option>4001-5000</option> <option>5001-6000</option> <option>6001-7000</option> <option>7001-8000</option> <option>8001-无穷大</option> </select> <select ng-model="selOrder"> <option value="">排序方式</option> <option value="id">id正序</option> <option value="-id">id逆序</option> <option value="price">价格正序</option> <option value="-price">价格逆序</option> </select> <button ng-click="delSelect()">批量删除</button> <br /><br /> <table border="1px solid blue" cellpadding="8" cellspacing="0"> <thead> <tr> <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </th> <th>产品编号</th> <th>产品名称</th> <th>产品价格</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="pro in products | filter:{'name':search} | orderBy:selOrder" ng-show="isShow(pro.price)"> <td><input type="checkbox" ng-model="pro.state" ng-click="checkSelectAll()" /></td> <td>{{pro.id}}</td> <td>{{pro.name}}</td> <td>{{pro.price | currency:"￥："}}</td> <td> <button>删除</button> <button ng-click="updateShowFun(pro)">修改</button> </td> </tr> </tbody> </table><br /> <button ng-click="formShowFun()">添加新产品</button><br /><br /> <form style="border: 1px solid blue; width: 300px;" ng-show="formShow"> <h3>添加商品</h3> 商品编号： <input type="text" placeholder="商品编号" ng-model="newId" /><br /><br /> 商品名称： <input type="text" placeholder="商品名称" ng-model="newName" /><br /><br /> 商品价格： <input type="text" placeholder="商品价格" ng-model="newPrice" /><br /><br /> <div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="divShow"> <ul> <li ng-repeat="chenk in checkSub">{{chenk}}</li> </ul> </div><br /> <input type="button" value="提交" ng-click="sub()" /> </form> <!-- 修改 --> <form style="border: 1px solid blue; width: 300px;" ng-show="updateShow"> <h3>修改商品</h3> 商品编号： <input type="text" placeholder="商品编号" ng-model="updateId" disabled="disabled" /><br /><br /> 商品名称： <input type="text" placeholder="商品名称" ng-model="updateName" /><br /><br /> 商品价格： <input type="text" placeholder="商品价格" ng-model="updatePrice" /><br /><br /> <div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="haha"> <ul> <li ng-repeat="chenk in updateArr">{{chenk}}</li> </ul> </div><br /> <input type="button" value="提交" ng-click="updateSub()" /> </form> </center> </body></html>阅读全文
0 0
- angular事件关键字
- angular事件
- Angular 事件
- angular js 过滤关键字
- HTML angular过滤关键字
- angular js 事件
- angular input回车事件
- angular 滑动事件
- angular.js中的事件
- angular 阻止事件冒泡
- angular内置事件
- ## Angular Event事件 ##
- angular阻止事件冒泡
- Angular 点击事件
- ionic angular 生命周期事件
- angular中onload事件
- angular option点击事件。
- angular 回车点击事件
- angularjs的添加和非空判断
- 如何防止手机通过USB连接PC充电时的关机闹钟异常现象?
- C++头文件中<>与""的区别，实例化类的两种方法
- Python中常用的其它基本操作
- OpenGL从1.0开始--绘制二次曲面
- angular事件关键字
- 【Maven】settings.xml详解
- 马尔科夫随机场
- MT5 GATEWAT API是什么鬼 之2
- js 省市二级联动菜单
- Leetcode算法学习日志-309 Best Time to Buy and Sell Stock with Cooldown
- 走进大前端：webApp书城整站开发
- Django系列——创建响应
- radio的取值
