Maison > interface Web > js tutoriel > Angular implémente des fonctions de filtrage et de suppression de tables

Angular implémente des fonctions de filtrage et de suppression de tables

php中世界最好的语言
Libérer: 2018-04-13 17:11:44
original
1956 Les gens l'ont consulté

Cette fois, je vais vous présenter Angular pour implémenter les fonctions de filtrage et de suppression de tables. Quelles sont les précautions pour qu'Angular implémente les fonctions de filtrage et de suppression de tables. Ce qui suit est un cas pratique, prenons. un regard.

Le code spécifique est le suivant :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>www.jb51.net 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 R9s",

                user:"赵云",

                tel:15777777777,

                price:4999,

                city:"北京",

                time:new Date('03-09 10:00'),

                sta:"已发货"

               },

               {

                checked:false,

                id:12,

                name:"VIVO X20",

                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">

    <p class="d1">

      <p>

        <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>

      </p>

      <p class="d2">

        <input type="button" value="新增订单" class="btn" ng-click="isc=true"/>

        <input type="button" value="批量发货" class="btn"/>

        <input type="button" value="批量删除" class="btn1" ng-click="delAll()"/>

        敏感词:米(商品名)->替换成*

      </p>

      <p>

        <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==&#39;已发货&#39;">{{a.sta}}</span>

              <span ng-show="a.sta==&#39;发货&#39;"><a href="#" rel="external nofollow" ng-click="a.sta=&#39;已发货&#39;">{{a.sta}}</a></span>

            </td>

            <td><input type="button" value="删除" ng-click="del(this)"/></td>

          </tr>

        </table>

      </p>

      <p 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()"/>

      </p>

    </p>

  </body>

</html>

Copier après la connexion

PS : Il y a encore certaines fonctions dans le code qui ne sont pas parfaites. Les amis intéressés peuvent les tester et les modifier par eux-mêmes.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

springmvc implémente un intercepteur d'annotations

anime.js crée une case à cocher animée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal