实现一个简单的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
1 var app = angular.module('hpapp'); 2 app.controller('InfoCtrl', function($scope) { 3 $scope.model = { 4 email: '1073520680', 5 text: '' 6 }; 7 });
指令部分
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: 0; 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; }