<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<div>
<ul style="list-style: none;">
<li>
商品名称:<input type="text" name="" id="name" value="" ng-model="aname" /><span id="uname"></span>
</li>
<li>
商品价格:<input type="text" name="" id="price" value="" ng-model="aprice" /><span id="uprice"></span>
</li>
<li>
商品数量:<input type="text" name="" id="num" value="" ng-model="anum" /><span id="unum"></span>
</li>
<li>
发货地址:
<select id="address" ng-model="address1">
<option value="河南">河南</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
</select>
<span id="uaddress"></span>
<select id="address2">
<option value=""></option>
</select>
</li>
</ul>
<input type="button" name="" id="" value="确定添加" ng-click="add()" />
</div>
<input type="button" name="" id="" value="批量删除" ng-click="plsc()" />
<table border="1" cellspacing="0" cellpadding="1" ng-show="tableshow">
<tr>
<th><input type="checkbox" name="" id="" value="" ng-model="cb" /></th>
<th>商品名称</th>
<th>商品价格</th>
<th>库存数量</th>
<th>库存商品总计</th>
<th>发货地址</th>
</tr>
<tr ng-repeat="x in shops">
<td><input type="checkbox" name="" id="" value="{{x.name}}" ng-model="cb" /></td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td>{{x.num}}</td>
<td>{{x.price*x.num}}</td>
<td>{{x.address}}</td>
</tr>
</table>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope) {
$scope.tableshow = true;
$scope.shops = [{
name: "罗马皮鞋",
price: 1000,
num: 10,
address: "河南-郑州"
},
{
name: "香奈儿",
price: 10000,
num: 100,
address: "上海-南京路"
},
{
name: "爱马仕",
price: 8000,
num: 10,
address: "杭州-下沙"
},
{
name: "LV",
price: 20000,
num: 50,
address: "杭州-高沙"
}
];
//添加
$scope.add = function() {
var newshops = {};
newshops.name = $scope.aname;
newshops.price = $scope.aprice;
newshops.num = $scope.anum;
newshops.address = $scope.address1;
$scope.shops.push(newshops);
}
//批量删除
$scope.plsc=function(){
var cbs = $("input:checked");
if(cbs.length==0){
alert("请选中数据在删除");
}else{
var a = confirm("确定删除吗");//定义一个变量 a a代码能删除 接下来在判断一下 如果能(a代表能删除) 则就是批量删除了
if(a){
cbs.each(function(){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].name==$(this).val()){
$scope.shops.splice(i,1);
break;
}
}
});
alert("删除成功");
}
}
}
});
//验证
$("#name").blur(function() {
var v = $("#name").val();
if(v == "") { //非空
$("#uname").html("商品名非空验证");
$("#uname").css("color", "red");
}
});
//价格验证
$("#price").blur(function() {
var v = $("#price").val();
if(v <= 0) {
$("#uprice").html("商品价格大于0");
$("#uprice").css("color", "red");
}
});
//数量验证
$("#num").blur(function() {
var v = $("#num").val();
if(v <= 0) {
$("#unum").html("商品数量大于0");
$("#unum").css("color", "red");
}
});
//二级联动
$("#address").change(function() {
var ad = $(this).val();
if(ad == "河南") {
$("#address2").empty();
$("#address2").append("<option>郑州</option>");
}else if(ad=="上海"){
$("#address2").empty();
$("#address2").append("<option>南京路</option>");
}else if(ad=="杭州"){
$("#address2").empty();
$("#address2").append("<option>下沙</option>");
}
});
</script>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<div>
<ul style="list-style: none;">
<li>
商品名称:<input type="text" name="" id="name" value="" ng-model="aname" /><span id="uname"></span>
</li>
<li>
商品价格:<input type="text" name="" id="price" value="" ng-model="aprice" /><span id="uprice"></span>
</li>
<li>
商品数量:<input type="text" name="" id="num" value="" ng-model="anum" /><span id="unum"></span>
</li>
<li>
发货地址:
<select id="address" ng-model="address1">
<option value="河南">河南</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
</select>
<span id="uaddress"></span>
<select id="address2">
<option value=""></option>
</select>
</li>
</ul>
<input type="button" name="" id="" value="确定添加" ng-click="add()" />
</div>
<input type="button" name="" id="" value="批量删除" ng-click="plsc()" />
<table border="1" cellspacing="0" cellpadding="1" ng-show="tableshow">
<tr>
<th><input type="checkbox" name="" id="" value="" ng-model="cb" /></th>
<th>商品名称</th>
<th>商品价格</th>
<th>库存数量</th>
<th>库存商品总计</th>
<th>发货地址</th>
</tr>
<tr ng-repeat="x in shops">
<td><input type="checkbox" name="" id="" value="{{x.name}}" ng-model="cb" /></td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td>{{x.num}}</td>
<td>{{x.price*x.num}}</td>
<td>{{x.address}}</td>
</tr>
</table>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope) {
$scope.tableshow = true;
$scope.shops = [{
name: "罗马皮鞋",
price: 1000,
num: 10,
address: "河南-郑州"
},
{
name: "香奈儿",
price: 10000,
num: 100,
address: "上海-南京路"
},
{
name: "爱马仕",
price: 8000,
num: 10,
address: "杭州-下沙"
},
{
name: "LV",
price: 20000,
num: 50,
address: "杭州-高沙"
}
];
//添加
$scope.add = function() {
var newshops = {};
newshops.name = $scope.aname;
newshops.price = $scope.aprice;
newshops.num = $scope.anum;
newshops.address = $scope.address1;
$scope.shops.push(newshops);
}
//批量删除
$scope.plsc=function(){
var cbs = $("input:checked");
if(cbs.length==0){
alert("请选中数据在删除");
}else{
var a = confirm("确定删除吗");//定义一个变量 a a代码能删除 接下来在判断一下 如果能(a代表能删除) 则就是批量删除了
if(a){
cbs.each(function(){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].name==$(this).val()){
$scope.shops.splice(i,1);
break;
}
}
});
alert("删除成功");
}
}
}
});
//验证
$("#name").blur(function() {
var v = $("#name").val();
if(v == "") { //非空
$("#uname").html("商品名非空验证");
$("#uname").css("color", "red");
}
});
//价格验证
$("#price").blur(function() {
var v = $("#price").val();
if(v <= 0) {
$("#uprice").html("商品价格大于0");
$("#uprice").css("color", "red");
}
});
//数量验证
$("#num").blur(function() {
var v = $("#num").val();
if(v <= 0) {
$("#unum").html("商品数量大于0");
$("#unum").css("color", "red");
}
});
//二级联动
$("#address").change(function() {
var ad = $(this).val();
if(ad == "河南") {
$("#address2").empty();
$("#address2").append("<option>郑州</option>");
}else if(ad=="上海"){
$("#address2").empty();
$("#address2").append("<option>南京路</option>");
}else if(ad=="杭州"){
$("#address2").empty();
$("#address2").append("<option>下沙</option>");
}
});
</script>
</center>
</body>
</html>