English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
この記事では、Angularで複雑なテーブルフィルタリングおよび削除機能を実現する方法について説明します。皆さんに参考にしていただければ幸いです。以下に詳細を示します：
まず、実行結果を見てみましょう：
具体的なコードは以下の通りです：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">-8" />
<title>ja.oldtoolbag.com Angularフィルタリング、削除</title>
<style>
table{
border: 1px solid black;
width: 800px;
}
td , th{
border: 1px solid black;
text-align: center;
}
th{
background: #767674;
}
.d1{
width: 50%;
margin: 0 auto;
}
.d2{
margin-top: 10px;
}
.btn{
background: green;
color: white;
}
.btn1{
background: red;
color: white;
}
tr:nth-child(2n){
background-color: gainsboro;
}
</style>
<script src="angular.min.js"></script>
<script type="text/javascript" src="jquery-1.9.1.min.js" ></script>
<script>
angular.module("MyApp",[])
.controller("democ",function($scope,$filter){
$scope.isc = false;
$scope.arrs = [{
checked:false,
id:7,
name:\"OPPO R\"9s\",
user:\"赵云\",
tel:15777777777,
price:4999,
city:\"北京\",
time:new Date('03-09 10:00'),
sta:\"已发货\"
},
{
checked:false,
id:12,
name:\"VIVO X\"20\",
user:\"关羽\",
tel:15333333333,
price:2998,
city:\"上海\",
time:new Date('08-22 10:00'),
sta:\"已发货\"
},
{
checked:false,
id:1,
name:\"iPhone\" 8 Plus\",
user:\"曹操\",
tel:15111111111,
price:7588,
city:\"北京\",
time:new Date('09-04 10:00'),
sta:\"已发货\"
},
{
checked:false,
id:11,
name:\"小\"*Note5\"
user:\"黄忠\",
tel:13222222222,
price:699,
city:\"重庆\",
time:new Date('02-28 10:00'),
sta:"发货"
},
{
checked:false,
id:1,
name:\"小\"*Mix2\"
user:\"黄盖\",
tel:13111111111,
price:3299,
city:\"北京\",
time:new Date('03-015 10:00'),
sta:"发货"
}]
$scope.arr = $scope.arrs;
$scope.seluser = function(){}
$scope.arr = [];
var val = $scope.reg_user;
var f = $filter("filter");
$scope.arr = f($scope.arrs,{"user":val});
}
$scope.seltel = function(){}
$scope.arr = [];
var val = $scope.reg_tel;
var f = $filter("filter");
$scope.arr = f($scope.arrs,{"tel":val});
}
$scope.selsta = function(){}
$scope.arr = [];
var val = $scope.reg_sta;
var f = $filter("filter");
$scope.arr = f($scope.arrs,{"sta":val});
}
$scope.ckAll = function(){}
var ck = $scope.sta_ck;
for(var i=0; i<$scope.arrs.length; i++{
$scope.arrs[i].checked = ck;
}
}
$scope.del = function(th){
$scope.arrs.splice(th,1);
}
$scope.delAll = function(){
for(var i=0; i<$scope.arrs.length; i++{
if($scope.arrs[i].checked==true){
$scope.arrs.splice(i,1);
i--;
}
}
}
$scope.add = function(){
var d=new Date();
$scope.arrs.push({
checked:false,
id:$scope.a_id,
name:$scope.a_name,
user:$scope.a_user,
tel:$scope.a_tel,
price:$scope.a_price,
city:$scope.a_city,
time:d,
sta:"发货"
});
$scope.arr = $scope.arrs;
$scope.isc = false;
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="democ">
<div class="d1">
<div>
<input type="text" placeholder="ユーザー名検索" ng-change="seluser()" ng-model="reg_user"/>
<input type="text" placeholder="携帯電話番号検索" ng-change="seltel()" ng-model="reg_tel"/>
<select>
<option>選択してください/option>
<option>北京</option>
<option>上海</option>
<option>広州</option>
</select>
<select ng-change="selsta()" ng-model="reg_sta">
<option value="">選択状態</option>
<option value="发货">发货</option>
<option value="已发货">已发货</option>
</select>
<select ng-model="selid">
<option value="">--選択してください--</option>
<option value="id">ID昇順</option>
<option value="-id">ID降順</option>
</select>
<select ng-model="selmonth">
<option value="">開始月</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select ng-model="lastmonth">
<option value="">終了月</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="d2">
<input type="button" value="新しい注文を追加" class="btn" ng-click="isc=true"/>
<input type="button" value="一括発送" class="btn"/>
<input type="button" value="一括削除" class="btn"1" ng-click="delAll()"/>
敏感語:米(商品名)->置き換えに*
</div>
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<th><input type="checkbox" ng-change="ckAll()" ng-model="sta_ck"/></th>
<th>ID</th>
<th>商品名</th>
<th>ユーザー名</th>
<th>電話番号</th>
<th>価格</th>
<th>都市</th>
<th>注文時間</th>
<th>状態</th>
<th>操作</th>
</tr>
<tr ng-repeat="a in arr|orderBy : selid | filter:{time:selmonth} | filter:{time:lastmonth}">
<td><input type="checkbox" ng-model="a.checked"/></td>
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td>{{a.user}}</td>
<td>{{a.tel}}</td>
<td>{{a.price|currency : '￥'}}</td>
<td>{{a.city}}</td>
<td>{{a.time|date : 'MM-HH hh:dd:ss'}}</td>
<td>
<span ng-show="a.sta=='已发货'">{{a.sta}}</span>
<span ng-show="a.sta=='发货'"><a href="#" rel="external nofollow" ng-click="a.sta='已发货'">{{a.sta}}</a></span>
</td>
<td><input type="button" value="删除" ng-click="del(this)"/></td>
</tr>
</table>
</div>
<div ng-show="isc">
I D:<input type="text" ng-model="a_id"/><br />
商品名:<input type="text" ng-model="a_name"/><br />
用户名:<input type="text" ng-model="a_user"/><br />
手机号:<input type="text" ng-model="a_tel"/><br />
価 値:<input type="text" ng-model="a_price"/><br />
城 市:<input type="text" ng-model="a_city"/><br />
<input type="button" value="保存" ng-click="add()"/>
</div>
</div>
</body>
</html>
PS：コードにはまだ不完全な機能がいくつかあります。興味がある場合は、自分でテストし、修正して完成させることができます。
AngularJSに関する詳細な内容に興味を持つ読者は、本サイトの特集を参照してください：《AngularJSディレクティブ操作技術のまとめ》、《AngularJS入門と上級チュートリアル》および《AngularJS MVCアーキテクチャのまとめ》
本文がAngularJSプログラムデザインに役立つことを願っています。
声明：本稿の内容はインターネットから取得しており、著作権者所有、インターネットユーザーが自発的に貢献し、自己でアップロードしました。本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害を疑われる内容がある場合は、メールで：notice#wまでご連絡ください。3codebox.com（メール送信時、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは即座に侵害を疑われるコンテンツを削除します。）