angularjs_angular.js csdn-CSDN博客

本文链接：https://blog.csdn.net/qq_41554204/article/details/79816549

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/angular.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="UTF-8">
</script>

<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="请输入查询商品" ng-model="sel" />数量排序:
<select ng-model="selOrder">
<option></option>
<option value="Time">电影时长</option>
<option value="Price">售价</option>
<option value="playTime">上映时间</option>
<option value="-Score">评分</option>
<option value="-Time">电影时长(倒)</option>
<option value="-Price">售价(倒)</option>
<option value="-playTime">上映时间(倒)</option>
<option value="-Score">评分(倒)</option>
</select>
<button ng-click="pl()">批量删除</button><button ng-click="isShow=!isShow">添加</button>
<table border="1px" cellspacing="0px" style="width: 60%;">
<tr>
<td>
<input type="checkbox" ng-click="selectAllfun()" ng-model="selectAll" />

</td>

<td>电影名称</td>
<td>类别</td>
<td>时长</td>
<td>导演</td>
<td>售价</td>
<td>上映时间</td>
<td>评分</td>
<td>操作</td>
</tr>

<tr ng-repeat="x in datas | filter:{name:sel} |orderBy:selOrder">
<td><input type="checkbox" ng-model="x.state" /></td>
<td>{{x.name}}</td>
<td>{{x.Type[0]}},{{x.Type[1]}}</td>
<td>{{x.Time}}</td>
<td>{{x.Autor}}</td>
<td>{{x.Price}}</td>
<td>{{x.playTime|date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td>{{x.Score}}</td>
<td><button ng-click="remove($index)">删除</button><button ng-click="modify(x.name)">修改</button></td>
</tr>

</table>

<b><span>总金额:</span></b><span ng-bind="zj()"></span>
<br />
<fieldset style="width: 240px; height: 440px; border: solid yellow;" ng-show="isShow">
<legend>新增电影</legend>
<h3 style="text-align: center;">添加商品</h3> 电影名称:
<input type="text" ng-model="name1" /><br /><br /> 类别:
<select ng-init="select_maintype=filmType[0]" ng-model="select_maintype" ng-options="x.maintype for x in filmType"
ng-change="changeType()" >
</select>
<select ng-init="select_child=select_maintype.child[0]" ng-model="select_child" ng-options="y for y in select_maintype.child">
</select>

<br /><br /> 时长:
<input type="number" ng-model="Time1" /><br /><br /> 导演:
<input type="text" ng-model="Autor1" /><br /><br />
销售:
<input type="number" ng-model="Price1" /><br /><br />
上映时间:
<input type="date" ng-model="playTime1" /><br /><br />
评分:
<input type="number" ng-model="Score1" /><br /><br /><br />
<button style="margin-left: 100px;" ng-click="insert()">添加</button>
</fieldset>
<fieldset ng-show="isModifyShow">
<legend>修改电影</legend>
<table border="0" cellspacing="0" cellpadding="0">

<tr>
<td>电影名称</td><td><input type="text" ng-model="mname"/></td>
</tr>
<tr>
<td>时长</td><td><input type="text" ng-model="mTime"/></td>
</tr>
<tr>
<td>导演</td><td><input type="text" ng-model="mAutor"/></td>
</tr>
<tr>
<td align="center" colspan="2"><button ng-click="modifySave()">修改保存</button></td>
</tr>
</table>

</fieldset>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.orderKey="0";
$scope.checkAll=false;
//进行初使化
//$scope.films=[];
$scope.isShow=false;

$scope.filmType=[
{"maintype":"喜剧","child":["喜剧1","喜剧2"]},
{"maintype":"冒险","child":["冒险1","冒险2","冒险3"]},
{"maintype":"幻想","child":["幻想1","幻想2"]}

];

$scope.updateSub = function() {

$scope.datas[index].bh2 = $scope.datas[index].bh;

}

$scope.selectAll = false;
//全选反选
$scope.selectAllfun = function() {

if($scope.selectAll) {
for(index in $scope.datas) {

$scope.datas[index].state = true;
}
} else {

for(index in $scope.datas) {
$scope.datas[index].state = false;
}

}

}

$scope.submit = function() {

}

$scope.datas = [{

name: "情人三",
Type: "喜剧",
Type2: "爱情",
Time: 6666,
Autor: "明大人",
Price: 234,
playTime: 120,
Score: 9.2

}, {
name: "情人四",
Type: "喜剧",
Type2: "爱情",
Time: 6666,
Autor: "明大人",
Price: 123,
playTime: 125,
Score: 9.3
}, {
name: "情人五",
Type: "喜剧",
Type2: "爱情",
Time: 6666,
Autor: "明大人",
Price: 345,
playTime: 130,
Score: 9.1
}, ]
// $http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest").then(
// function success(obj){
// $scope.news=obj.data.newslist;
// }
// );

$scope.remove = function(index) {
if(confirm("确定删除吗？")) {

$scope.datas.splice(index, 1);

}

}

$scope.zj = function() {
var zj = 0;
for(var x = 0; x < $scope.datas.length; x++) {
zj += $scope.datas[x].Price;

}

return zj;

}

$scope.pl = function() {
//批量删除

var arrs = [];
for(var x = 0; x < $scope.datas.length; x++) {
if($scope.datas[x].state) {
arrs.push($scope.datas[x].name);
}
}
if(arrs.length <= 0) {
alert("请您选中你要删除的数据")

} else {
//开始删除

for(var x = 0; x < arrs.length; x++) {

for(var x2 = 0; x2 < $scope.datas.length; x2++) {

if(arrs[x] == $scope.datas[x2].name) {
//删除
$scope.datas.splice(x2, 1);
}

}

}

}

}

//添加

$scope.insert = function() {
if($scope.name1 == "" || $scope.name1 == null) {
alert("电影名称不能为空");
} else if($scope.select_maintype == "" || $scope.select_maintype == null) {
alert("类别不能为空");
} else if($scope.Time1 == "" || $scope.Time1 == null) {
alert("时长不能为空");
} else if($scope.Autor1 == "" || $scope.Autor1 == null) {
alert("导演不能为空");
}else if($scope.Price1 == "" || $scope.Price1 == null) {
alert("销售不能为空");
}else if($scope.playTime1 == "" || $scope.playTime1 == null) {
alert("上映时间不能为空");
}else if($scope.Score1 == "" || $scope.Score1 == null) {
alert("评分不能为空");
}
// else if(isNaN($scope.nums1)) {
// alert("数量必须是数字");
// } else if($scope.price1 == "" || $scope.price1 == null) {
// alert("单价不能为空");
// } else if(isNaN($scope.price1)) {
// alert("单价必须是数字");
// }
else {

var aa=[]
aa.push($scope.select_maintype.maintype);
aa.push($scope.select_child);
$scope.datas.push({
name: $scope.name1,
Type: aa,
Type: aa,
Time: $scope.Time1,
Autor: $scope.Autor1,
Price: $scope.Price1,
playTime: $scope.playTime1,
Score: $scope.Score1,
});

}

}
var mdata="";

$scope.modify=function(fname){
$scope.isModifyShow=!$scope.isModifyShow;

for (var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].name==fname){
mdata=$scope.datas[i];
$scope.mname=mdata.name;
$scope.mTime=mdata.Time;
$scope.mAutor=mdata.Autor;
break;
}
}

}

$scope.modifySave=function(){
mdata.name=$scope.mname;
mdata.Time=$scope.mTime;
mdata.Autor=$scope.mAutor;

$scope.isModifyShow=!$scope.isModifyShow;

}

});
</script>

</body>

</html>