实现一个简单的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. Windows Phone 8 开发资料

    Design http://aka.ms/wp8devdesign Develop http://aka.ms/wp8devdoc Test http://aka.ms/wp8testing Publ ...

  2. JavaScript学习笔记-简单的欢迎cookie

    0<!DOCT0000YPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

  3. 给菜单加个优雅的unselect事件

    先上图,说场景 假设默认选中的是item1,我现在选中item3了,有时候需要对item1做一些别的处理.常见的做法是,切换选中状态前找到当前选中(item1),或者每次选中后选中的项记录在中间变量. ...

  4. C# 对sharepoint 列表的一些基本操作,包括添加/删除/查询/上传文件给sharepoint list添加数据

    转载:http://www.cnblogs.com/kivenhou/archive/2013/02/22/2921954.html 操作List前请设置SPWeb的allowUnsafeUpdate ...

  5. js浏览器窗口

    一.clientwidth和clientheight 注:返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位,比如 100em之类,它还是会返回 px的大小. (CSS获取的话,是照着 ...

  6. Qt做动画旋转旋转图片

    今天看到百度首页的音乐播放有个图片可以旋转,感觉很酷就用qt做了一个类似的,关键时刻还是要发挥数学功底,静下心来,写一写,画一画,编程对数学分析能力要求还是不小的,以后要经常锻炼数学分析能力啊! Wi ...

  7. Retrofit2 + OkHttp3设置Http请求头(Headers)方法汇总

    在构建网络层时会遇到一个问题就是要手动配置Http请求的Headers,写入缓存Cookie,自定义的User-Agent等参数,但是对于有几十个接口的网络层,我才不想用注解配置Headers,目前网 ...

  8. 利用反射，泛型，静态方法快速获取表单值到Model

    在项目中经常需要处理表单,给model赋值,很烦人的一些重复代码.如下边的代码: News news = new News(); news.Id = int.Parse(Request.Form[&q ...

  9. idea 新建web项目

  10. ActiveMQ_点对点队列(二)

      一.本文章包含的内容 1.列举了ActiveMQ中通过Queue方式发送.消费队列的代码(普通文本.json/xml字符串.对象数据) 2.spring+activemq方式   二.配置信息 1 ...