实现一个简单的input清空内容，且清空对应ngModel

前台部分

<html ng-app="hpapp">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="css/test.css">

    <script type="text/javascript" src="js/angular.js"></script>

    <script type="text/javascript" src="js/inputempty.js"></script>

    <script type="text/javascript" src="js/info.js"></script>

</head>

<body>

    <div ng-controller="InfoCtrl">

        <input type="text" name="email" ng-model="model.email" inputempty maxvalue="10">

        <br>

        <br>

        <br>

        <input type="text" name="text" ng-model="model.text" inputempty>

        <br>

        <br>

        <br> {{model.email +"*"+ model.text}}

    </div>

</body>

</html>

控制器部分  info.js

 var app = angular.module('hpapp');

 app.controller('InfoCtrl', function($scope) {

     $scope.model = {

         email: '1073520680',

         text: ''

     };

 });

指令部分

var app = angular.module('hpapp', []);

app.directive('inputempty', function() {

    return {

        restrict: 'A',

        require: 'ngModel',

        link: function(scope, elem, attrs, ctrl) {

            var close = '<span class="clear"></span>';

            elem.next().bind('click', function() {

                ctrl.$setViewValue('');

                ctrl.$render();
            });

        }

    };

});
ctrl.$setViewValue('');//清空ngModel

elem.val('');//清空表单

css 部分

.closeW{

    width: 16px;

    height: 16px;

    color: #ccc;

    text-align: center;

    line-height: 16px;

    border: 1px solid #ccc;

    border-radius:16px;

    float: left;

}

.content{

    width: 530px;

    border:1px solid #ccc;

    position: relative;

}

.editW{

    width: 480px;

    min-height: 280px;

    margin:;

    padding: 10px;

    outline: none;

}

.clear{

    clear: both;

}

.empty{

    width: 16px;

    height: 16px;

    color: #ccc;

    text-align: center;

    line-height: 16px;

    border-radius:16px;

    border: 1px solid #ccc;

    margin-left: -20px;

    cursor: pointer;

    display: inline-block;

}

.clear {

    display: inline-block;

    width: 20px;

    height: 20px;

    position: absolute;

    margin-left: -20px;

    cursor: pointer;

    background: url('http://fanyi.baidu.com/static/i18n/zh/widget/translate/main/translateio/clear_9154fd87.png') no-repeat -20px -10px;

}

input{

    padding-right:20px;

    padding-left: 5px;

}

初学angular-简单的angular指令的更多相关文章

  1. 推荐 15 个 Angular.js 应用扩展指令(参考应用)

    几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...

  2. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

  3. 使用OAuth保护REST API并使用简单的Angular客户端

    1.概述 在本教程中,我们将使用OAuth保护REST API并从简单的Angular客户端使用它. 我们要构建的应用程序将包含四个独立的模块: 授权服务器 资源服务器 UI implicit - 使 ...

  4. 构建一个简单的Angular工程

    1.创建一个空的工程,之后用webstorm打开,添加一个bower.json文件: { "name": "AngularTpl", "depende ...

  5. Angular使用操作事件指令ng-click传多个参数示例

    本文实例讲述了Angular使用操作事件指令ng-click传多个参数功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="m ...

  6. 简单的angular购物车商品小计

    <!DOCTYPE html> <html lang="en" ng-app="shopApp"> <head> <m ...

  7. Angular JS - 5 - Angular JS 模块和控制器

    1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...

  8. Angular 1与 Angular 2之间的一些差别

    现在在用ng1.5.8做一个项目,ng的优点和特性我就不用多说了,ng1在陆续更新到1.5/1.6后就没再推出新版本了,ng2已经面世测试很久了,如同很多系统和框架一样,每个大的版本更新都会有新特性加 ...

  9. Angular 学习笔记 (Angular 9 & ivy)

    refer : https://blog.angularindepth.com/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde47 ...

  10. AngularJs angular.injector、angular.module

    angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...

随机推荐

  1. SQLite剖析之功能特性

    SQLite是遵守ACID的轻型数据库引擎,它包含在一个相对较小的C库中.它是D.RichardHipp创建的公有领域项目.不像常见的客户端/服务器结构范例,SQLite引擎不是一个与程序通信的独立进 ...

  2. md5加密篇（一）

    /// <summary> /// 获取文件的md5摘要 /// </summary> /// <param name="sFile">文件流& ...

  3. Beta--项目冲刺第七天

    胜利在望-- 队伍:F4 成员:031302301 毕容甲 031302302 蔡逸轩 031302430 肖阳 031302418 黄彦宁 会议内容: 1.站立式会议照片: 2.项目燃尽图 3.冲刺 ...

  4. 天气预报API获取

    1.citycode: http://mobile.weather.com.cn/js/citylist.xml http://files.cnblogs.com/files/ys-wuhan/cit ...

  5. mysql 根据某些字段之和排序

    在自己项目中记录了比赛球队获得金银铜牌的具体奖牌数,遇到需求是按照奖牌个数排序 select a.RANK_ID,a.COUNTRY,a.GOLD,a.SILVER,a.BRONZE,a.ICON,a ...

  6. 【转】深入浅出Java三大框架SSH与MVC的设计模式

    原文链接:http://www.cnblogs.com/itao/archive/2011/08/22/2148844.html 在许许多多的初学者和程序员,都在趋之若鹜地学习Web开发的宝典级框架: ...

  7. Dubbo_异常_服务注册运行正常但是Dubbo-Admin看不到服务（亲测可用）

    一.背景: 1.Dubbo服务正常注册到ZooKeeper 2.客户端调用Dubbo服务正常 二.原因: Dubbo-Admin未配置分组信息 三.解决步骤: 1.dubbo.properties添加 ...

  8. 模板题 codevs 1993 草地排水 想学习的请看链接

    不能再水的题了. Dinic算法,比EK更快. 想要学习请看链接   https://comzyh.com/blog/archives/568/ 并附上我的模板(其实和comzyh大神的一样) #in ...

  9. 【转】C#判断奇偶数的函数

    // 现代流行的"程序员" public static bool IsOdd(int n) { while (true) { switch (n) { : return true; ...

  10. mima开发实列

    最顶层父基类Clinet:用于记录公共内容 切供多个Clinet继承公用 import java.net.InetSocketAddress; import java.nio.charset.Char ...