angularjs简单使用...

来源：互联网发布：中经网数据库怎么注册编辑：程序博客网时间：2024/06/06 16:34

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tr{
background: gray;
}
.trtr:nth-child(2n){
background: lightsteelblue;
}
.trtr:nth-child(2n-1){
background: gainsboro;
}

</style>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script>
angular.module("App",[]).controller("demoC",function($scope){
$scope.goods = [{xz:false,id:2001,goodname:"iPhoneX",name:"张三",tel:13523654123,price:869900,city:"北京",time:"11-23 10:00:00",state:false},{xz:false,id:2011,goodname:"iPhone7",name:"小明",tel:22223654123,price:779900,city:"上海",time:"10-23 11:00:00",state:false},{xz:false,id:2962,goodname:"iPhone6",name:"王五",tel:33523654123,price:669900,city:"深圳",time:"11-11 09:00:00",state:false},{xz:false,id:1996,goodname:"iPhone4",name:"李四",tel:85462654123,price:759900,city:"天津",time:"11-24 12:00:00",state:false}];
$scope.flag = false;
$scope.f1 = false;
$scope.f2 = false;
$scope.f3 = false;
$scope.f4 = false;
$scope.f5 = false;
$scope.ff = false;

$scope.fff = true;
$scope.add = function(){
$scope.flag = true;
}
$scope.save = function(){
var goodname = $scope.goodnameadd;
var name = $scope.nameadd;
var tel = $scope.teladd;
var price = $scope.priceadd;
var city = $scope.cityadd;
// alert(goodname+"---"+name+"---"+tel+"---"+price+"---"+city);

if (goodname==undefined||goodname=="") {
$(".goodnamee").text("商品名称不能为空");
$(".goodname").css("border-color","red");
}else{
$(".goodnamee").text("");
$(".goodname").css("border-color","");
$scope.f1 = true;
}

if (goodname==undefined||goodname=="") {
$(".namee").text("名称不能为空");
$(".name").css("border-color","red");
}else{
$(".namee").text("");
$(".name").css("border-color","");
$scope.f2 = true;
}
if (goodname==undefined||goodname=="") {
$(".tell").text("手机号不能为空");
$(".tel").css("border-color","red");
}else{
$(".tell").text("");
$(".tel").css("border-color","");
$scope.f3 = true;
}
if (goodname==undefined||goodname=="") {
$(".pricee").text("商品价格不能为空");
$(".price").css("border-color","red");
}else{
$(".pricee").text("");
$(".price").css("border-color","");
$scope.f4 = true;
}
if ($scope.f1&&$scope.f2&&$scope.f3&&$scope.f4) {
$(".cityy").text("");
$scope.f5 = true;
}else{
$(".cityy").text("城市必选");
}
if ($scope.f1&&$scope.f2&&$scope.f3&&$scope.f4&&$scope.f5) {
$scope.goods.push({id:1,goodname:goodname,name:name,tel:tel,price:price,city:$scope.cityadd,time:new Date(),state:false});
$scope.flag = false;
}
}
$scope.ckAll = function(){
for (var i in $scope.goods) {
$scope.goods[i].xz = $scope.ckall;
}
}
$scope.deleAll = function(){
for (var i=0;i<$scope.goods.length;i++) {
if ($scope.goods[i].state) {
if ($scope.goods[i].xz) {
$scope.goods.splice(i,1);
i--;
}

}
}
}
$scope.bian = "";
$scope.id= function(){
$scope.bian = "id";
$scope.ff = !$scope.ff;
}
$scope.price= function(){
$scope.bian = "price";
$scope.ff = !$scope.ff;
}
$scope.time= function(){
$scope.bian = "time";
$scope.ff = !$scope.ff;
}
})
</script>
</head>
<body ng-app="App" ng-controller="demoC">
<div style="width: 1000px; height: auto; margin: 0 auto;">
<button ng-click="add()" style="width: 150px; height: 30px; border-radius: 10%; background: lightskyblue;">新增订单</button>
<button ng-click="deleAll()" style="width: 100px; height: 30px; border-radius: 10%; background: lightskyblue;">批量删除</button>
<input type="text" placeholder="按商品名称查询..." ng-model="selname" style="margin-left: 270px;"/>
<input type="text" placeholder="安手机号查询..." ng-model="seltel" style="margin-left: 50px;" />
<select ng-model="selstate">
<option value="" checked = "">-状态-</option>
<option value="true">已发货</option>
<option value="false">未发货</option>
</select>
<table style="width: 1000px;height: auto;" border="1px" cellspacing="0">
<tr class="tr">
<th align="center"><input type="checkbox" ng-model="ckall" ng-click="ckAll()"/>全选</th>
<th align="center">id<button ng-click="id()" style="width: 60px; height: 23px; border-radius: 10%; background: lightblue;">排序</button></th>
<th align="center">商品名</th>
<th align="center">用户名</th>
<th align="center">手机号</th>
<th align="center">价格<button ng-click="price()" style="width: 60px; height: 23px; border-radius: 10%; background: lightblue;">排序</th>
<th align="center">城市</th>
<th align="center">下单时间<button ng-click="time()" style="width: 60px; height: 23px; border-radius: 10%;background: lightblue;">排序</th>
<th align="center">状态</th>
</tr>
<tr ng-repeat="n in goods|orderBy:bian:ff|filter:{goodname:selname}|filter:{tel:seltel}|filter:{state:selstate}" class="trtr">
<td align="center"><input type="checkbox" ng-model="n.xz"/></td>
<td align="center">{{n.id}}</td>
<td align="center">{{n.goodname}}</td>
<td align="center">{{n.name}}</td>
<td align="center">{{n.tel}}</td>
<td align="center">{{n.price|currency:"$"}}</td>
<td align="center">{{n.city}}</td>
<td align="center">{{n.time|date:"MM-dd hh:mm:ss"}}</td>
<td align="center"><span ng-show="!n.state" ng-click="n.state = !n.state">未发货</span>
<span ng-show="n.state" ng-click="n.state = !n.state" style="background: green;">已发货</span>
</td>
</tr>
</table>

<form ng-show="flag">
商品名：<input type="text" placeholder="商品名。。。" ng-model="goodnameadd" class="goodname"/><span class="goodnamee"></span><br />
用户名：<input type="text" placeholder="用户名。。。" ng-model="nameadd" class="name"/><span class="namee"></span><br />
手机号：<input type="text" placeholder="手机号。。。" ng-model="teladd" class="tel"/><span class="tell"></span><br />
价格为：<input type="text" placeholder="价格为。。。" ng-model="priceadd" class="price"/><span class="pricee"></span><br />
城市：<select ng-model="cityadd">
<option value="" checked = "">-请选择城市-</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="天津">天津</option>
</select><span class="cityy"></span><br />
<button ng-click="save()">保存</button>
</form>

</div>
</body>
</html>

阅读全文

0 0