<script>
angularjs自己定义一个数组
app.controller("myCtrl", function($scope) {
$scope.user= [/*{
"id": 1,
"name": "张三1",
"age": 20,
"sex": "男",
"state": false
},
{
"id": 2,
"name": "张三2",
"age": 30,
"sex": "女",
"state": false
},
{
"id": 3,
"name": "张三3",
"age": 20,
"sex": "男",
"state": false
},
{
"id": 4,
"name": "张三4",
"age": 10,
"sex": "女",
"state": false
} */
]
//删除方法
$scope.del = function(index) {
if(confirm("确认要删除吗？")) {
$scope.user.splice(index, 1);
}
}
//全部删除
$scope.delall = function() {
if(confirm("确认要全部删除吗？")) {
$scope.user = []
}
}
//添加方法
$scope.name ="";
$scope.age ="";
$scope.sex ="";
$scope.add = function() {
var newUser = {
id:$scope.user.length+1,
name:$scope.name,
age:$scope.age,
sex:$scope.sex,
}
// alert($scope.name);
$scope.user.push(newUser);
}
//批量删除
$scope.delpi = function(){
var userNames =[];
for(index in $scope.user){
if($scope.user[index].state == true){
userNames.push($scope.user[index].name);
}
}
if(userNames.length>0){
if(confirm("是否删除选中的?")){
for(i in userNames){
var name = userNames[i];
for(i2 in $scope.user){
if($scope.user[i2].name == name){
$scope.user.splice(i2,1);
}
}
}
}
}else{
alert("请选择")
}
}
});
</script>
//布局
<body ng-app="myApp" ng-controller="myCtrl">
姓名查找<input type="text" ng-model="search" placeholder="请输入名字"/>
年龄查找<select style="width: 60px;" ng-model="selage" >
<option></option>
<option>30</option>
<option>20</option>
<option>10</option>
</select>
性别查找<select style="width: 60px;" ng-model="selsex">
<option></option>
<option>男</option>
<option>女</option>
</select>
<button type="button" ng-click="delall()">全部删除</button>
<button type="button" ng-click="delpi()">批量删除</button>
<table border="1px" class="table1">
<thead>
<tr>
<th style="text-align: center">
全选<input type="checkbox" ng-model="quanxuan" />
</th>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in user | filter:{'name':search,'sex':selsex,'age':selage}" align="center">
<td>
<input type="checkbox" ng-checked="quanxuan" ng-model="x.state" />
</td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.sex}}</td>
<td>
<button type="button" ng-click="del($index)">删除</button>
</td>
</tr>
</tbody>
</table>
<button type="button" ng-click="delpi()" style="margin-top: 15px;">添加用户</button>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>姓名:</td>
<td>
<input type="text" placeholder="请输入姓名" ng-model="name"/>
</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 align="center">
<td colspan="2">
<button type="button" ng-click="add()">提交</button>
</td>
</tr>
</table>
</body>
672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
