混合开发即安卓第四个月

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div class="top">
<input id="" name="" value="" ng-model="ss"/>

<button ng-click="showTable()" >搜索</button>

<select name="" ng-model="qqqqq">
<option value="">按要求排序</option>
<option value="shichang">电影时长</option>
<option value="shoujia">售价</option>
<option value="shangyingshijina">上映时间</option>
<option value="pingfen">评分</option>
</select>
<button ng-click="showTable1()" value="">批量删除</button>
<input type="button" id="" value="清空所有数据" ng-click="clearAll()"/>

<input type="button" value="添加" ng-click="showAdd=!showAdd" />
<br/>
<div ng-show="showAdd">
电影名称：<input type="text" ng-model="name2" /><span class="ww"></span><br />
<tr><td align="right">类别:</td>
<td>
<select ng-init="select_maintype=filmsType[0]" ng-model="select_maintype" ng-options="x.maintype for x in filmsType"
ng-click="changeType()">

</select>

<select ng-init="select_child=select_maintype.chiIdType[0]" ng-model="select_child" ng-options="y for y in select_maintype.chiIdType">

</select>

</td>
<td><span id="s_type" class="tip"></span></td>
</tr><br/>
时长：<input type="number" ng-model="shichang2" /><br />
导演：<input type="text" ng-model="daoyan2" /><br />
售价：<input type="number" ng-model="shoujia2" /><br />
上映时间：<input type="date" ng-model="shangyingshijian2" /><br />
评分：<input type="number" ng-model="pingfen2" /><br />
<input type="button" ng-click="addGoods()" value="添加" />

</div>
</div>
<table border="1" cellspacing="0" cellpadding="0" width="70%">
<thead>
<tr>
<th><input type="checkbox" ng-click="aaaa()" ng-model="aaaa" /></th>
<th>电影名称<button ng-click="orderbyshi()"></button></th>
<th>类别</th>
<th>时长</th>
<th>导演</th>
<th>售价<button ng-click="orderbyshi1()"></button></th>
<th>上映时间<button ng-click="orderbyshi2()"></button></th>
<th>评分<button ng-click="orderbyshi3()"></button></th>
<th>操作</th>
</tr></thead>

<tbody>
<tr ng-repeat="x in orders|filter:{name:ss,status:qstatus}|orderBy:qqqqq">
<td><input type="checkbox" value="{{x.name}}" ng-model="aaaa" /></td>
<td>{{x.name}}</td>
<td>{{x.leibie}}</td>
<td>{{x.shichang}}分钟</td>
<td>{{x.daoyan}}</td>
<td>{{x.shoujia|currency:"￥："}}</td>
<td>{{x.shangyingshijian}}</td>
<td>{{x.pingfen}}</td>
<td><button ng-click="showTable(x.name)">删除</button>
<button ng-click="showGoods(x.name)">修改</button>
</td>
<div>总价:{{getTotal()|currency:"￥:"}}</div>

<div ng-show="updateShow">
电影名称：<input type="text" ng-model="upname" /><br />
类别：<input type="text" ng-model="upleibie" /><br />
时长：<input type="text" ng-model="upshichang" /><br />
导演：<input type="text" ng-model="updaoyan" /><br />
售价：<input type="text" ng-model="upshoujia" /><br />
操作：<input type="text" ng-model="upshangyingshijian" /><br />
评分:<input type="text" ng-model="uppingfen" /><br />
<input type="button" ng-click="updateGoods()" value="修改" />
</div><br />

<p> {{goods_json}}</p>

<script type="text/javascript">var app = angular.module("myapp", []);
app.controller("myctrl", function($scope, $http) {
$scope.isShow = true;
/*$scope.orders=[
{name:"前任三",leibie:"喜剧,爱情",shichang:120,daoyan:"田玉申",shoujia:120,shangyingshijian:"2017-11-29 18:46",pingfen:9.2},
{name:"天龙八部",leibie:"古装",shichang:140,daoyan:"张无忌",shoujia:122,shangyingshijian:"2017-11-09 14:46",pingfen:9.1},
{name:"肖申克的救赎",leibie:"战争",shichang:150,daoyan:"令狐冲",shoujia:130,shangyingshijian:"2017-11-19 15:46",pingfen:9.1},
{name:"海贼王",leibie:"动漫",shichang:120,daoyan:"郭靖",shoujia:125,shangyingshijian:"2017-11-22 14:46",pingfen:9.4},
{name:"秦始皇",leibie:"纪录片",shichang:160,daoyan:"杨过",shoujia:140,shangyingshijian:"2017-11-19 17:46",pingfen:9.7}];

* */
$http({
method: "GET",
url: "newdata.json"
//url:"http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest"

}).then(function success(response) {
$scope.orders = response.data;

}, function error(respone) {

});
$scope.isModifyShow = false;
$scope.filmsType = [{
"maintype": "喜剧",
"chiIdType": ["喜剧1", "喜剧2"]
},
{
"maintype": "历史",
"chiIdType": ["历史1", "历史2"]
},
{
"maintype": "科幻",
"chiIdType": ["科幻1", "科幻2"]
}
];

$scope.searchKey = "";
//$scope.orderKey = "";
$scope.updateShow = false;
//是否显示修改回显区域

$scope.upIndex = "";
//定义接收修改信息的字段
$scope.name = "";
$scope.leibie = "";
$scope.shichang = "";
$scope.daoyan = "";
$scope.shoujia = "";
$scope.shangyingshijian = "";
$scope.pingfen = "";

var updateGood = ""; //要修改的商品信息
//显示修改区域
$scope.showGoods = function(name) {
$scope.updateShow = true;
for(var i = 0; i < $scope.orders.length; i++) {
if(name == $scope.orders[i].name) {
updateGood = $scope.orders[i];
break;

}
}

$scope.upname = updateGood.name;
$scope.upleibie = updateGood.leibie;
$scope.upshichang = updateGood.shichang;
$scope.updaoyan = updateGood.daoyan;
$scope.upshoujia = updateGood.shoujia;
$scope.upshangyingshijian = updateGood.shangyingshijian;
$scope.uppingfen = updateGood.pingfen;

};

//修改对象
$scope.updateGoods = function() {
//类似java里的两个引用指向同一个对象；
updateGood.name = $scope.upname;
updateGood.leibie = $scope.upleibie;
updateGood.shichang = $scope.upshichang;
updateGood.daoyan = $scope.updaoyan;
updateGood.shoujia = $scope.upshoujia;
updateGood.shangyingshijian = $scope.upshangyingshijian;
updateGood.pingfen = $scope.uppingfen;
//让修改区域隐藏
$scope.updateShow = false;
}

//定义排序的字段
$scope.ob = "";
//记住是否点击
$scope.isClick = true;

//按id字段进行排序
$scope.orderbyshi = function() {
if($scope.isClick) {
$scope.qqqqq = "name"; //升序排序
$scope.isClick = false;
} else {
$scope.qqqqq = "-name"; //降序排序
$scope.isClick = true;
}

}

//售价排序
$scope.orderbyshi1 = function() {
if($scope.isClick) {
$scope.qqqqq = "shichang";
$scope.isClick = false;
} else {
$scope.qqqqq = "-shich";
$scope.isClick = true;
}
}
//上映时间排序
$scope.orderbyshi2 = function() {
if($scope.isClick) {
$scope.qqqqq = "shangyingshijian"; //升序
$scope.isClick = false;
} else {
$scope.qqqqq = "-shangyingshijian"; //降序
$scope.isClick = true;
}
}

//评分排序
$scope.orderbyshi3 = function() {
if($scope.isClick) {
$scope.qqqqq = "pingfen";
$scope.isClick = false;
} else {
$scope.qqqqq = "-pingfen";
$scope.isClick = true;
}
}
//表单删除
$scope.showTable = function(name) {

for(var i = 0; i < $scope.orders.length; i++) {
if($scope.orders[i].name == name) {
$scope.orders.splice(i, 1);
break;
}

}
}
// 删除全部全选反选
$scope.showTable1 = function() {
var a = $("input:checked");

for(var i = 0; i < a.length; i++) {
//得到电影名称
var fn = a[i].value;

for(var j = 0; j < $scope.orders.length; j++) {
if(fn == $scope.orders[j].name) {
//进行删除

$scope.orders.splice(j, 1);
break;
}
}

}
}

$scope.getTotal = function() {
var tt = 0;
for(var i = 0; i < $scope.orders.length; i++) {
tt += $scope.orders[i].shoujia;
}
return tt;
}

//清除所有数据
$scope.clearAll = function() {
$scope.orders = [];
}

//增加
$scope.addGoods = function() {
if($scope.name1=""||$scope.name1==null){
alert("不为空");
}else if($scope.leibie1=""||$scope.leibie1==null){
alert("不为空");
}else if($scope.shichang1=""||$scope.shichang1==null){
alert("不为空");
}else if($scope.daoyan1=""||$scope.daoyan1==null){
alert("不为空");
}else if($scope.shoujia1=""||$scope.shoujia1==null){
alert("不为空");
}else if($scope.shangyingshijian1=""||$scope.shangyingshijian1==null){
alert("不为空");
}else if($scope.pingfen1=""||$scope.pingfen1==null){
alert("不为空");
}else{

var goods = {};
goods.name = $scope.name2;

var aa = [];
aa.push($scope.select_maintype.maintype);
aa.push($scope.select_child);
goods.leibie = aa;

goods.shichang = $scope.shichang2;
goods.daoyan = $scope.daoyan2;
goods.shoujia = $scope.shoujia2;
goods.shangyingshijian = $scope.shangyingshijian2;
goods.pingfen = $scope.pingfen2;
$scope.orders.push(goods);
}
}

$scope.changeType = function() {
$scope.select_child = $scope.select_maintype.chiIdType[0];
}

});</script>
</body>

</html>

自备数据

[
{"name":"前任三","leibie":"喜剧,爱情","shichang":120,"daoyan":"田玉申","shoujia":120,"shangyingshijian":"2017-11-29 18:46","pingfen":9.2},
{"name":"天龙八部","leibie":"古装","shichang":140,"daoyan":"张无忌","shoujia":122,"shangyingshijian":"2017-11-09 14:46","pingfen":9.1},
{"name":"肖申克的救赎","leibie":"战争","shichang":150,"daoyan":"令狐冲","shoujia":130,"shangyingshijian":"2017-11-19 15:46","pingfen":9.1},
{"name":"海贼王","leibie":"动漫","shichang":120,"daoyan":"郭靖","shoujia":125,"shangyingshijian":"2017-11-22 14:46","pingfen":9.4},
{"name":"秦始皇","leibie":"纪录片","shichang":160,"daoyan":"杨过","shoujia":140,"shangyingshijian":"2017-11-19 17:46","pingfen":9.7}]

混合开发 即安卓第四个月

猜你喜欢

混合开发即安卓第四个月