anngularjs的增删改查

来源:互联网 发布:node.js w3c 编辑:程序博客网 时间:2024/05/29 14:34
<script>
angular.module("app",[])
.controller("demo",function($scope){
$scope.list=[
{id:1,name:"张蕊",pwd:"123",age:"18",sex:"男"}
];
$scope.name =""; 
$scope.pwd=""
    $scope.age ="";  
    $scope.sex ="";  
    $scope.add = function() { 
   
        var newUser = {  
            id:$scope.list.length+1,  
            name:$scope.name, 
            pwd:$scope.pwd,
            age:$scope.age,  
            sex:$scope.sex,  
        }  
$scope.list.push(newUser);
        $scope.user.push(newUser);  
    }  
     
    $scope.delall=function(){
   
    $scope.list=[];
    }
     
    $scope.delpi=function(){
    alert("15631631563");
    if($("input[type='checkbox']:checked").length==0){
    alert("请选中");
    }else{
    $("input[type='checkbox']:checked").parent().parent().remove();
    }
    }
     
    $scope.xiu=function(i){
    $scope.list[i].pwd="10010";
   
    }
     
});

</script>



<div>
姓名查找:<input type="text" ng-model="sname"/>
年龄查找:<select ng-model="sage">
<option>10-20</option>
<option>20-30</option>
<option>30-40</option>
<option>40-50</option>
<option>50-60</option>
</select>
性别查找:<select ng-model="ssex">
<option>--请选择性别--</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="delall()">删除全部</button>
<button ng-click="delpi()">批量删除</button><br /><br /><br />
<table style="border: 1px solid black;width: 800px; text-align: center;" >
<tr>
<th>全选<input type="checkbox" ng-model="xuan"/></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="li in list|filter:{'name':sname,'age':sage,'sex':ssex}">
<td><input type="checkbox" ng-checked="xuan" /></td>
<td>{{li.id}}</td>
<td>{{li.name}}</td>
<td>{{li.pwd}}</td>
<td>{{li.age}}</td>
<td>{{li.sex}}</td>
<td><button ng-click="xiu($index)">修改密码</button> </td>
</tr>
</table>
<br /><br /><br />
<button style="margin-left: 370px;width: 100px;">添加用户</button><br /><br />
<table border="1" style="margin-left: 280px;height: 200px;width: 300px;">
<tr>
<td>姓名</td>
<td><input type="text" placeholder="请输入姓名" ng-model="name"/> </td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" placeholder="请输入密码" ng-model="pwd"/> </td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" placeholder="请输入年龄" ng-model="age"/> </td>
</tr>
<tr>
<td>性别</td>
<td><input type="text"placeholder="请输入性别" ng-model="sex"/> </td>
</tr>
<tr>
<td colspan="2" align="center"><button ng-click="add()">提交</button> </td>

</tr>
</table>
</div>


原创粉丝点击