HTML5通过下拉列表选择植物大战僵尸角色，更换图片，更换内容,ng-class,ng-change,ng-repeat

最新推荐文章于 2024-04-30 00:27:39 发布

懿范

最新推荐文章于 2024-04-30 00:27:39 发布

阅读量349

点赞数

分类专栏：课堂笔记文章标签： HTML5混合App开发

本文链接：https://blog.csdn.net/weixin_43312392/article/details/88716688

版权

课堂笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<head>
		<meta charset="UTF-8">
		<title>植物大战僵尸</title>
		<link rel="stylesheet" href="bootstrap/bootstrap.css" />
	</head>
<body>
	<div ng-app="app" class="container" style="width:1000px;margin:auto;">
		<div ng-controller="MainController" class="col-lg-12" ng-style="myStyle" >
			<select ng-model="role" ng-init="role='豌豆射手'" ng-change="change()">
				<optgroup label="植物">
						<option>豌豆射手</option>
						<option>玉米投手</option>
						<option>白菜</option>
						<option>火爆辣椒</option>
						<option>西瓜投手</option>
					</optgroup>
					<optgroup label="僵尸">
						<option>铁桶僵尸</option>
						<option>读报僵尸</option>
						<option>小鬼僵尸</option>
						<option>伽刚特尔僵尸</option>
					</optgroup>
			</select>
			<div ng-repeat="item in items | filter:role" ng-cloak>
				<div class="col-lg-4">
					<img width="200px" ng-src="{{item.img}}">
				</div>
				<div class="col-lg-8">
						<div class="col-lg-3">姓名:</div>
						<div class="col-lg-5">{{role}}</div>
						<br />
						<div class="col-lg-3">生命:</div>
						<div class="col-lg-5">{{item.HP}}</div>
						<br />
						<div class="col-lg-3">价格:</div>
						<div class="col-lg-5">{{item.cost}}</div>
						<br />
						<div class="col-lg-3">冷却:</div>
						<div class="col-lg-5">{{item.CD}}</div>
						<br />
						<div class="col-lg-3">伤害:</div>
						<div class="col-lg-5">{{item.Damage}}</div>
					</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="lib/angular.js" ></script>
		<script>
			
			var app=angular.module('app',[]);
			app.controller('MainController',function($scope){
				
				$scope.items=[
					{name:"豌豆射手",HP:"100",cost:"100",CD:"20",Damage:"100",img:"img/豌豆射手.jpg"},
					{name:"白菜",HP:"200",cost:"150",CD:"50",Damage:"100",img:"img/白菜.jpg"},
					{name:"玉米投手",HP:"100",cost:"100",CD:"20",Damage:"100",img:"img/玉米投手.jpg"},
					{name:"西瓜投手",HP:"200",cost:"300",CD:"100",Damage:"100",img:"img/西瓜投手.jpg"},
					{name:"火爆辣椒",HP:"50",cost:"150",CD:"100",Damage:"100",img:"img/火爆辣椒.jpg"},
					{name:"铁桶僵尸",HP:"200",cost:"100",CD:"NaN",Damage:"100",img:"img/铁桶僵尸.jpg"},
					{name:"读报僵尸",HP:"100",cost:"100",CD:"NaN",Damage:"100",img:"img/读报僵尸.jpg"},
					{name:"小鬼僵尸",HP:"100",cost:"100",CD:"NaN",Damage:"100",img:"img/小鬼僵尸.jpg"},
					{name:"伽刚特尔僵尸",HP:"1000",cost:"100",CD:"NaN",Damage:"100",img:"img/伽刚特尔僵尸.jpg"}
					
				];
				$scope.myStyle={
					"background-color":"rgb(0,128,0)"
				};
				$scope.change=function(){
					if($scope.role.indexOf("僵尸") != -1){
						$scope.myStyle={
							"background-color":"purple"
						};
						console.log("选择了僵尸"+$scope.role);
					}else{
						$scope.myStyle={
							"background-color":"rgb(0,128,0)"
						};
						console.log("选择了植物");
					}
				};
			});
		</script>
</body>

懿范

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5通过下拉列表选择植物大战僵尸角色，更换图片，更换内容,ng-class,ng-change,ng-repeat

<head> <meta charset="UTF-8"> <title>植物大战僵尸</title> <link rel="stylesheet" href="bootstrap/bootstrap.css" /> </head><body> <div ng-app="app" cla...
复制链接

扫一扫

专栏目录