關於angularjs的繫結事件
阿新 • • 發佈:2019-02-08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../angular/angular.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
//初始值
$scope.tid="";
$scope.tname="";
$scope.tprice="";
$scope.xid="";
$scope.xname="";
$scope.xprice="";
$scope.ttishi=false;
$scope.xtishi=false;
$scope.biao=[
{
"id":20,
"name":"華為",
"price":2888,
state:false
},
{
"id":60,
"name":"蘋果x",
"price":9888,
state:false
},
{
"id":90,
"name":"三星",
"price":6888,
state:false
},
{
"id":600,
"name":"錘子",
"price":1888,
state:false
}
];
//查詢
$scope.sel="";
//分級
$scope.fenji="--請選擇--";
$scope.fshow=function(price){
if($scope.fenji=="--請選擇--"){
return true;
}
var cs=$scope.fenji.split("-");
if(price<cs[0]||price>cs[1]){
return false;
}else{
return true;
}
}
//排序
$scope.paixu="+id";
//全選
$scope.cheda=false;
$scope.cheda1=function(){
if($scope.cheda){
for(x in $scope.biao){
$scope.biao[x].state=true;
}
}else{
for(x in $scope.biao){
$scope.biao[x].state=false;
}
}
}
//反選
$scope.chexiao1=function(){
var a=false;
for(x in $scope.biao){
if(!$scope.biao[x].state){
a=true;
}
}
if(a){
$scope.cheda=false;
}else{
$scope.cheda=true;
}
}
//批量刪除
$scope.deleteall=function(){
var s=[];
for(x in $scope.biao){
if($scope.biao[x].state){
s.push($scope.biao[x].name);
}
}
if(s.length<=0){
alert("請選擇");
}
for(x in s){
for(x2 in $scope.biao){
if(s[x]==$scope.biao[x2].name){
$scope.biao.splice(x2,1);
}
}
}
}
//單個刪除
$scope.delete=function(name){
for(x in $scope.biao){
if(name==$scope.biao[x].name){
$scope.biao.splice(x,1);
}
}
}
//新增
$scope.flag=false;
$scope.tj=function(){
$scope.flag2=false;
if($scope.flag){
$scope.flag=false;
}else{
$scope.flag=true;
}
}
//修改
$scope.flag2=false;
$scope.update=function(l){
$scope.flag=false;
$scope.flag2=true;
$scope.xid=l.id;
$scope.xname=l.name;
$scope.xprice=l.price;
}
//新增 驗證
$scope.zu=[];
$scope.tbaocun=function(){
$scope.zu=[];
if($scope.tid==""){
$scope.zu.push("id不能為空");
}else{
if(isNaN($scope.tid)){
$scope.zu.push("id必須為數字");
}
}
if($scope.tname==""){
$scope.zu.push("名字不能為空");
}
if($scope.tprice==""){
$scope.zu.push("價格不能為空");
}else{
if(isNaN($scope.tprice)){
$scope.zu.push("價格必須為數字");
}
}
if( $scope.zu.length>0){
$scope.ttishi=true;
}else{
$scope.ttishi=false;
var k={
"id":parseInt($scope.tid),
"name":$scope.tname,
"price":parseInt($scope.tprice),
state:false
}
$scope.biao.push(k);
}
}
//修改 驗證
$scope.zu2=[];
$scope.xbaocun=function(){
$scope.zu2=[];
if($scope.xname==""){
$scope.zu2.push("名字不能為空");
}
if($scope.xprice==""){
$scope.zu2.push("價格不能為空");
}else{
if(isNaN($scope.xprice)){
$scope.zu2.push("價格必須為數字");
}
}
if( $scope.zu2.length>0){
$scope.xtishi=true;
}else{
$scope.xtishi=false;
for(x in $scope.biao){
if($scope.xid==$scope.biao[x].id){
$scope.biao[x].name=$scope.xname;
$scope.biao[x].price=parseInt($scope.xprice);
}
}
}
}
});
</script>
<style>
table tr:nth-child(odd){
background-color: cornflowerblue;
}
table tr:nth-child(even){
background-color: burlywood;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
查詢<input type="text" ng-model="sel">
分級<select ng-model="fenji">
<option>--請選擇--</option>
<option>0-2001</option>
<option>2001-4001</option>
<option>4001-6001</option>
<option>6001-8001</option>
<option>8001-15001</option>
</select>
排序<select ng-model="paixu">
<option value="+id">排序方式</option>
<option value="+id">id正序</option>
<option value="-id">id逆序</option>
<option value="+price">價格正序</option>
<option value="-price">價格逆序</option>
</select>
<button ng-click="deleteall()">批量刪除</button><br />
<table border="1px solid" cellpadding="10px" cellspacing="0px">
<thead>
<tr style="background-color: #8F8F8F;">
<td><input type="checkbox" ng-model="cheda" ng-click="cheda1()"></td>
<td>產品編號</td>
<td>產品名稱</td>
<td>產品價格</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in biao | filter:{'name':sel} | orderBy:paixu" ng-show="fshow(x.price)" onmouseover="this.style.cursor='hand'">
<td><input type="checkbox" ng-model="x.state" ng-click="chexiao1()"></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td>
<button ng-click="delete(x.name)">刪除</button>
<button ng-click="update(x)">修改</button>
</td>
</tr>
</tbody>
</table><br />
<button ng-click="tj()">新增</button>
<div ng-show="flag" style="border:1px solid;" >
<h4>新增介面</h4>
id:<input type="text" ng-model="tid"><br />
姓名:<input type="text" ng-model="tname"><br />
價格:<input type="text" ng-model="tprice"><br />
<button ng-click="tbaocun()">儲存</button><br />
<div ng-show="ttishi">
<ul>
<li ng-repeat="x in zu">{{x}}</li>
</ul>
</div>
</div>
<div ng-show="flag2" style="border:1px solid;" >
<h4>修改介面</h4>
id:<input type="text" disabled="disabled" ng-model="xid"><br />
姓名:<input type="text" ng-model="xname"><br />
價格:<input type="text" ng-model="xprice"><br />
<button ng-click="xbaocun()">儲存</button><br />
<div ng-show="xtishi">
<ul>
<li ng-repeat="x in zu2">{{x}}</li>
</ul>
</div>
</div>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../angular/angular.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
//初始值
$scope.tid="";
$scope.tname="";
$scope.tprice="";
$scope.xid="";
$scope.xname="";
$scope.xprice="";
$scope.ttishi=false;
$scope.xtishi=false;
$scope.biao=[
{
"id":20,
"name":"華為",
"price":2888,
state:false
},
{
"id":60,
"name":"蘋果x",
"price":9888,
state:false
},
{
"id":90,
"name":"三星",
"price":6888,
state:false
},
{
"id":600,
"name":"錘子",
"price":1888,
state:false
}
];
//查詢
$scope.sel="";
//分級
$scope.fenji="--請選擇--";
$scope.fshow=function(price){
if($scope.fenji=="--請選擇--"){
return true;
}
var cs=$scope.fenji.split("-");
if(price<cs[0]||price>cs[1]){
return false;
}else{
return true;
}
}
//排序
$scope.paixu="+id";
//全選
$scope.cheda=false;
$scope.cheda1=function(){
if($scope.cheda){
for(x in $scope.biao){
$scope.biao[x].state=true;
}
}else{
for(x in $scope.biao){
$scope.biao[x].state=false;
}
}
}
//反選
$scope.chexiao1=function(){
var a=false;
for(x in $scope.biao){
if(!$scope.biao[x].state){
a=true;
}
}
if(a){
$scope.cheda=false;
}else{
$scope.cheda=true;
}
}
//批量刪除
$scope.deleteall=function(){
var s=[];
for(x in $scope.biao){
if($scope.biao[x].state){
s.push($scope.biao[x].name);
}
}
if(s.length<=0){
alert("請選擇");
}
for(x in s){
for(x2 in $scope.biao){
if(s[x]==$scope.biao[x2].name){
$scope.biao.splice(x2,1);
}
}
}
}
//單個刪除
$scope.delete=function(name){
for(x in $scope.biao){
if(name==$scope.biao[x].name){
$scope.biao.splice(x,1);
}
}
}
//新增
$scope.flag=false;
$scope.tj=function(){
$scope.flag2=false;
if($scope.flag){
$scope.flag=false;
}else{
$scope.flag=true;
}
}
//修改
$scope.flag2=false;
$scope.update=function(l){
$scope.flag=false;
$scope.flag2=true;
$scope.xid=l.id;
$scope.xname=l.name;
$scope.xprice=l.price;
}
//新增 驗證
$scope.zu=[];
$scope.tbaocun=function(){
$scope.zu=[];
if($scope.tid==""){
$scope.zu.push("id不能為空");
}else{
if(isNaN($scope.tid)){
$scope.zu.push("id必須為數字");
}
}
if($scope.tname==""){
$scope.zu.push("名字不能為空");
}
if($scope.tprice==""){
$scope.zu.push("價格不能為空");
}else{
if(isNaN($scope.tprice)){
$scope.zu.push("價格必須為數字");
}
}
if( $scope.zu.length>0){
$scope.ttishi=true;
}else{
$scope.ttishi=false;
var k={
"id":parseInt($scope.tid),
"name":$scope.tname,
"price":parseInt($scope.tprice),
state:false
}
$scope.biao.push(k);
}
}
//修改 驗證
$scope.zu2=[];
$scope.xbaocun=function(){
$scope.zu2=[];
if($scope.xname==""){
$scope.zu2.push("名字不能為空");
}
if($scope.xprice==""){
$scope.zu2.push("價格不能為空");
}else{
if(isNaN($scope.xprice)){
$scope.zu2.push("價格必須為數字");
}
}
if( $scope.zu2.length>0){
$scope.xtishi=true;
}else{
$scope.xtishi=false;
for(x in $scope.biao){
if($scope.xid==$scope.biao[x].id){
$scope.biao[x].name=$scope.xname;
$scope.biao[x].price=parseInt($scope.xprice);
}
}
}
}
});
</script>
<style>
table tr:nth-child(odd){
background-color: cornflowerblue;
}
table tr:nth-child(even){
background-color: burlywood;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
查詢<input type="text" ng-model="sel">
分級<select ng-model="fenji">
<option>--請選擇--</option>
<option>0-2001</option>
<option>2001-4001</option>
<option>4001-6001</option>
<option>6001-8001</option>
<option>8001-15001</option>
</select>
排序<select ng-model="paixu">
<option value="+id">排序方式</option>
<option value="+id">id正序</option>
<option value="-id">id逆序</option>
<option value="+price">價格正序</option>
<option value="-price">價格逆序</option>
</select>
<button ng-click="deleteall()">批量刪除</button><br />
<table border="1px solid" cellpadding="10px" cellspacing="0px">
<thead>
<tr style="background-color: #8F8F8F;">
<td><input type="checkbox" ng-model="cheda" ng-click="cheda1()"></td>
<td>產品編號</td>
<td>產品名稱</td>
<td>產品價格</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in biao | filter:{'name':sel} | orderBy:paixu" ng-show="fshow(x.price)" onmouseover="this.style.cursor='hand'">
<td><input type="checkbox" ng-model="x.state" ng-click="chexiao1()"></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td>
<button ng-click="delete(x.name)">刪除</button>
<button ng-click="update(x)">修改</button>
</td>
</tr>
</tbody>
</table><br />
<button ng-click="tj()">新增</button>
<div ng-show="flag" style="border:1px solid;" >
<h4>新增介面</h4>
id:<input type="text" ng-model="tid"><br />
姓名:<input type="text" ng-model="tname"><br />
價格:<input type="text" ng-model="tprice"><br />
<button ng-click="tbaocun()">儲存</button><br />
<div ng-show="ttishi">
<ul>
<li ng-repeat="x in zu">{{x}}</li>
</ul>
</div>
</div>
<div ng-show="flag2" style="border:1px solid;" >
<h4>修改介面</h4>
id:<input type="text" disabled="disabled" ng-model="xid"><br />
姓名:<input type="text" ng-model="xname"><br />
價格:<input type="text" ng-model="xprice"><br />
<button ng-click="xbaocun()">儲存</button><br />
<div ng-show="xtishi">
<ul>
<li ng-repeat="x in zu2">{{x}}</li>
</ul>
</div>
</div>
</center>
</body>
</html>