<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angularjs1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!--
二级联动
省市县-区
-->
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select class="sheng" onchange="change()">
</select>
<select class="shi">
</select>
<hr />
<h2>+-号</h2>
<table border="1px" cellspacing="" cellpadding="">
<tr ng-repeat="g in goods">
<th>{{g.name}}</th>
<th>{{g.price}}</th>
<th>
<input type="button" id="" value="-" ng-click="jian(g.name,g.num)" />
<input type="text" value="{{g.num}}" />
<input type="button" id="" value="+" ng-click="jia(g.name,g.num)" />
</th>
</tr>
</table>
<script type="text/javascript">
//二维数组
var arr = new Array();
arr["北京"] = new Array("西二旗", "望京", "金融街");
arr["辽宁"] = new Array("铁岭", "大连", "沈阳");
//遍历第一层数组
for(var s in arr) {
$(".sheng").append("<option>" + s + "</option>");
}
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {
$scope.goods = [{
"name": "iphonexs",
"price": 2000,
"num": 2
}, {
"name": "8848",
"price": 10000,
"num": 2
}];
//在控制器里面创建减的方法
$scope.jian = function(name, num) {
//判断,如果现在的数量是0,就不要减了,提示一下
if(num == 0) {
alert("已经是0了,");
return;
}
num--;
//将减完之后的值,赋给输入框
//只需要修改数组里面的数据就可以了,不要改标签
for(var i = 0; i < $scope.goods.length; i++) {
var g = $scope.goods[i];
if(g.name == name) {
g.num = num;
}
}
}
//加
$scope.jia = function(name, num) {
num++;
//将减完之后的值,赋给输入框
//只需要修改数组里面的数据就可以了,不要改标签
for(var i = 0; i < $scope.goods.length; i++) {
var g = $scope.goods[i];
if(g.name == name) {
g.num = num;
}
}
}
});
function change() {
var sheng1 = $(".sheng").val();
//取得的省,就是二维数组的下标,
//根据下标取得相应的一维数组
//注意,每次切换的时候需要将市清空
$(".shi").empty();
var shis = arr[sheng1];
for(var i = 0; i < shis.length; i++) {
var shi = shis[i];
$(".shi").append("<option>" + shi + "</option>");
}
}
</script>
</body>
AngularJs二级联动+加+减
猜你喜欢
转载自blog.csdn.net/weixin_43143580/article/details/82756830
今日推荐
周排行