AngularJs二级联动+加+减

<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二级联动+加+减

猜你喜欢
