AngularJS中自定义指令的使用--最后实现表格的CRUD

最新推荐文章于 2018-05-08 17:20:23 发布

老米的世界

最新推荐文章于 2018-05-08 17:20:23 发布

阅读量774

点赞数 1

分类专栏： AngularJS jquery 文章标签： angularjs jquery 界面数据 CRUD

本文链接：https://blog.csdn.net/MPFLY/article/details/77193664

版权

jquery 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

AngularJS

6 篇文章 0 订阅

订阅专栏

网上也有很多介绍自定义指令的文章了，在此处简单记录一下自己的使用过程，以及遇到的问题。本篇文章主要是记录我实现表格CRUD的过程，在这中间，简单使用了一下自定义指令，就简单带过一下。
在这里，我使用了Angularjs和jquery。
这是界面：
这里写图片描述
查询使用了angularjs中的过滤器。
很简单的一个功能，实现起来很方便。

点击【新增】和【修改】会分别弹出两个输入框，进行数据的录入和修改。
修改会将原来的数据带过来。
如图：
这里写图片描述

<!DOCTYPE html>
<html ng-app="myApp">

    <head>
        <meta charset="UTF-8">
        <title>自定义指令</title>
        <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <link rel="stylesheet" href="../css/test.css" />
    </head>

    <body ng-controller="myCtrl">
        <div  new-Directive>
            查询：<input ng-model="search" type="text" placeholder="请输入要查询的字段" />
            <table border="1">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>住址</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="x in texts | filter:search">
                     <td>{{x.name}}</td>
                     <td>{{x.age}}</td>
                     <td>{{x.city}}</td>
                     <td>
                      <button  ng-click="add($index)">新增</button> 
                      <button  ng-click="del($index)">删除</button>
                      <button  ng-click="update($index)">修改</button>
                     </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="addDiv">
            姓名：<input type="text" ng-model="newName" /><br />
            年龄：<input type="text" ng-model="newAge" /><br />
            住址：<input type="text" ng-model="newCity" /><br />
            <button ng-click="ensure()">确定</button><button ng-click="cancel()">取消</button>
        </div>
        <div class="addDiv2">
            <input style="display:none;" class="index" ng-model="index" />
            姓名：<input type="text" ng-model="upName" /><br />
            年龄：<input type="text" ng-model="upAge" /><br />
            住址：<input type="text" ng-model="upCity" /><br />
            <button ng-click="ensure2()">确定</button><button ng-click="cancel2()">取消</button>
        </div>
    </body>

    <script>
        var app = angular.module("myApp", []);
        //开始自定义指令
        app.directive("newDirective", function() {
        //返回一个方法,注入参数$scope.在下面写自己的方法
            return function($scope) {
                /*删除该行*/
                $scope.del = function ($index) {
                if($index>=0){
//               if(confirm("是否删除"+$scope.texts[$index].name) ){
                  $scope.texts.splice($index,1);
//               }
                }
               };
                $scope.add = function ($index) {
                $(".addDiv").show(200);
               };

            }
        });
        app.controller("myCtrl", function($scope) {
            $scope.texts = [
            {name:"张三",age:"23",city:"海南"},
            {name:"李四",age:"25",city:"香港"},
            {name:"王五",age:"25",city:"济南"},
            {name:"刘六",age:"22",city:"济南"},
            {name:"李七",age:"35",city:"烟台"},
            {name:"张八",age:"32",city:"聊城"},
            {name:"吕九",age:"30",city:"盘锦"}
            ];

        $scope.ensure = function(){
$scope.texts.push({name:$scope.newName,age:$scope.newAge,city:$scope.newCity});
        }
        //点击弹出框的取消，弹出框消失
        $scope.cancel = function(){
            $(".addDiv").hide(200);
        }
        $scope.cancel2 = function(){
            $(".addDiv2").hide(200);
        }
        //点击【修改】，弹出输入框，并将原来的数据带过来
        $scope.update = function($index){
            $(".addDiv2").show(200);
            $scope.upName = $scope.texts[$index].name;
            $scope.upAge = $scope.texts[$index].age;
            $scope.upCity = $scope.texts[$index].city;
            $scope.index = $index;
        }
        //点击弹出框的确定,修改原来的信息.其实是在原来的位置插入一条新的数据,并将原来的数据删除,在这里用到了splice方法.稍后会再写一篇文章详细介绍这个方法.
        $scope.ensure2 = function(){
            $scope.texts.splice($scope.index,1,{name:$scope.upName,age:$scope.upAge,city:$scope.upCity});
        }

        })

    </script>

</html>

最后我们来说说自定义指令：
在操作自定义指令的时候，需要用到很多参数，这里我就不再搬东西，点击这里学习自定义指令的参数介绍

app.directive("newDirective", function() {
            return function($scope) {
                /*删除该行*/
                $scope.del = function ($index) {
                if($index>=0){
                 if(confirm("是否删除"+$scope.texts[$index].name) ){
                  $scope.texts.splice($index,1);
                 }
                }
               };
                $scope.obj = {};
                $scope.add = function ($index) {
                $(".addDiv").show(200);
               };

            }
        });

在这里，我直接返回了一个参数是（$scope）方法体，然后在里面再自己定义自己的方法。然后就和在JS中写方法一模一样了。当然了，我这儿没有设置restrict，因此默认为A（attr(当做标签属性来使用)）

<div  new-Directive></div>

老米的世界

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS中自定义指令的使用--最后实现表格的CRUD

网上也有很多介绍自定义指令的文章了，在此处简单记录一下自己的使用过程，以及遇到的问题。本篇文章主要是记录我实现表格CRUD的过程，在这中间，简单使用了一下自定义指令，就简单带过一下。在这里，我使用了Angularjs和jquery。这是界面：查询使用了angularjs中的过滤器。很简单的一个功能，实现起来很方便。点击【新增】和【修改】会分别弹出两个输入框，进行数据的录入和修改。
复制链接

扫一扫

专栏目录