HTML js 增加，删除，修改，查找，排序

最新推荐文章于 2019-12-18 20:49:10 发布

潜水断桥

最新推荐文章于 2019-12-18 20:49:10 发布

阅读量875

点赞数

本文链接：https://blog.csdn.net/qq_37454196/article/details/78853635

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/anglarjs.min.js"></script>
		<script src="js/ionic.bundle.js"></script>
		<script>
		 var zxcv=	angular.module("APP",[])
		zxcv.filter("demoF", function() {//只能返回函数
					return function(input) { //input---->接受要转换的内容   good.name|demoF
						if(input != undefined && input != "" && input.length > 0) {
							var newc = input.replace(/米/g, "*");
							return newc;
						}
						return input;
					};
				})
			zxcv.controller("text",["$scope",function($scope){
				var time=new Date();
				
				
				$scope.users=[
				{a1:false,a2:7,a3:"oppo",a4:"关羽",a5:18514479641,a6:4999,a7:"北京",a8:time,a9:1},
				{a1:false,a2:11,a3:"oppo2",a4:"关米1",a5:18514479641,a6:4999,a7:"北京",a8:time,a9:1},
				{a1:false,a2:14,a3:"oppo3",a4:"关羽2",a5:18514479641,a6:4999,a7:"北京",a8:time,a9:1},
				{a1:false,a2:1,a3:"oppo4",a4:"关羽3",a5:18514479891,a6:4999,a7:"上海",a8:time,a9:1},
				{a1:false,a2:2,a3:"oppo5",a4:"关羽4",a5:18854479641,a6:4999,a7:"上海",a8:time,a9:1},
				{a1:false,a2:5,a3:"oppo6",a4:"关羽5",a5:18517559641,a6:4999,a7:"上海",a8:time,a9:1},
				{a1:false,a2:8,a3:"oppo7",a4:"关羽6",a5:1855823641,a6:4999,a7:"上海",a8:time,a9:1}
				
				]
				$scope.del=function(i){
					$scope.users.splice(i,1);
				}
				$scope.cheAll=function(){
					for(var i=0;i<$scope.users.length;i++){
						$scope.users[i].a1=$scope.cheall;
					}
				}
				$scope.cza2=true;
				$scope.xga4=false;
				$scope.add=false;
				$scope.addshuju=function(){
					$scope.users.push({a1:false,
						a2:$scope.adda2,
						a3:$scope.adda3,
						a4:$scope.adda4,
						a5:$scope.adda5,
						a6:$scope.adda6,
						a7:$scope.adda7,
						a8:$scope.adda8,
						a9:1});
					$scope.add=false;
				}
				$scope.delall=function(){
					for(var i=0;i<$scope.users.length;i++){
						if($scope.users[i].a1){
							$scope.users.splice(i,1);
							i--;
						}
					}
				}
				$scope.plfh=function(){
					for(var i=0;i<$scope.users.length;i++){
						if($scope.users[i].a1){
							$scope.users[i].a9=2;
							
						}
					}
					
				}
				
				
				
			}]);
		</script>
		
		
	</head>
	<body ng-app="APP" ng-controller="text">
		<input type="text" ng-model="cza4" />
		<input type="number" ng-model="cza5" />
		<select ng-model="cza7">  
                <option value="" selected = "selected">请选择发货初始地(城市)</option>  
                <option value="北京">北京</option>  
                <option value="上海">上海</option>  
            </select>  
            
		<select ng-model="cza9">  
                <option value="" selected = "selected">请选择发货状态</option>  
                <option value="1">未发货</option>  
                <option value="2">发货</option>  
        </select>  
        <select  ng-model="cza2">  
               <option value="" >--请选择</option>  
               <option value="a2">小到大</option> 
               <option value="-a2">大到小</option> 
        </select> 
        <br />
        <input type="button" ng-click="add=true"  value="新增订单"/>
        <input type="button" value="批量发货"  ng-click="plfh()" />
        <input type="button" value="批量删除"  ng-click="delall()"/>
        
        <br />
        <div ng-show="add">
        	ID<input type="number" ng-model="adda2" /><br />
        	商品名<input type="text" ng-model="adda3" /><br />
        	用户名<input type="text" ng-model="adda4" /><br />
        	手机号<input type="number" ng-model="adda5" /><br />
        	价格<input type="number" ng-model="adda6" /><br />
        	城市<input type="text" ng-model="adda7" /><br />
        	下单时间<input type="date" ng-model="adda8" /><br />
        	<input type="button" value="确定" ng-click="addshuju()" />
        </div>
        
		<table>
			<tr>
				<th><input type="checkbox" ng-model="cheall"    ng-click="cheAll()"/> </th>
				<th>ID</th>
				<th>商品名</th>
				<th>用户名</th>
				<th>手机号</th>
				<th>价格</th>
				<th>城市</th>
				<th>下单时间</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
			<tr ng-repeat="a in users | filter:{a4:cza4,a5:cza5,a7:cza7,a9:cza9}|orderBy:cza2">
				<th><input type="checkbox" ng-model="a.a1"/> </th>
				<th> {{a.a2}}</th>
				<th>{{a.a3}}</th>
				<th> <span ng-show="!xga4"> {{a.a4|demoF}}</span>
					<span ng-show="xga4"><input type="text" ng-model="a.a4" /> </span>
					
				</th>
				<th>{{a.a5}}</th>
				<th>{{a.a6|currency :'￥'}}</th>
				<th>{{a.a7}}</th>
				<th>{{a.a8 | date :'yyyy-MM-dd hh:mm:ss'}}</th>
				<th><span ng-show="a.a9==1"> <a  ng-click="a.a9=2" href="#">未发货</a> </span>
						<p ng-show="a.a9==2">已发货</p>
				</th>
				<th>  <input value="删除" type="button" ng-click="del($index)" />
					<button   ng-click="xga4=true"> 修改</button><button ng-show="xga4" ng-click="xga4=false"> 保存</button>	
				</th>
				
			</tr>
			
			
		</table>
		
	</body>
</html>

潜水断桥

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML js 增加，删除，修改，查找，排序

var zxcv= angular.module("APP",[]) zxcv.filter("demoF", function() {//只能返回函数 return function(input) { //input---->接受要转换的内容 good.name|demoF if(input != undefined && input != "" && input.
复制链接

扫一扫