二级联动,table添加删除数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/jquery-1.11.0.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$http.get("json/students.json").then(function(res){
$scope.students = res.data;
})
$http.get("json/provinces.json").then(function(res){
$scope.provinces = res.data;
})
$scope.btn_add = function(){
$scope.students.push({
"name":$scope.name,
"pass":$scope.pass,
"zhuzhi":$scope.s1.pro + $scope.s2,

});
}
$scope.del = function(i){
$scope.students.splice(i,1);
}
$scope.xuanAll = function(){
var ches = $("table input[type='checkbox']");
ches.each(function(){
$(this).prop("checked",true);
})
/*alert(ches.length);
for (var i = 0; i < ches.length; i++) {
ches[i].checked = true;

}*/
$scope.pldel = function(){
var ches = $("input:checked");
ches.each(function(){
var t = $(this).parent().parent();
t.remove();
})
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
姓名:<input type="text" id="aname" ng-model="name"/>
密码:<input type="text" id="apass" ng-model="pass"/>
省份:<select ng-model="s1" ng-options="p.pro for p in provinces">
</select>

城市:<select ng-model="s2" ng-options="c for c in s1.children">
</select>
<input type="button" ng-click="btn_add();" value="添加" /><br />
<input type="button" value="全选" ng-click="xuanAll();" />
<input type="button" value="批量删除" ng-click="pldel();" />
<table border="1">
<tr>
<td>选择</td>
<td>姓名</td>
<td>密码</td>
<td>住址</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in students">
<td><input type="checkbox"/></td>
<td>{{x.name}}</td>
<td>{{x.pass}}</td>
<td>{{x.zhuzhi}}</td>
<td><input type="button" value="删除" ng-click="del($index)"/></td>
</tr>
</table>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_41927301/article/details/80384518
今日推荐