angular content clear

作者:frank 发表日期:2015-09-21 21:20:27 更新日期:2016-08-15 20:10:58 分类:猿文色

摘要

基于angular material,可用于清除输入框,选择框的内容。

正文

原理

此插件的原理是使用div包装需要清除的元素。在需要被清除的元素上添加fcclear即可。其中fc-class为外部包装div的样式,fc-icon-class为清除icon的样式。

配置如下:

 angular
  .module('demoWan', [
    'ngMaterial',
    'ngMdIcons',
    'fc.clear'
  ]).controller('DemoCtrl', DemoCtrl);

  function DemoCtrl($scope) {
    $scope.projects = [{
      name: 'Select Test',
    }, {
      name: 'Select Test'
    }];
  }

原始HTML文件如下:

<div ng-controller="DemoCtrl">
  <div layout="row">
    <md-input-container md-no-float fcclear fc-class="clear-name" fc-icon-class="clear-icon" flex="40">
      <input ng-model="name" placeholder="Name">
    </md-input-container>
    <span flex></span>
    <md-input-container md-no-float fcclear fc-class="clear-sex" fc-icon-class="clear-icon" flex="40">
      <input ng-model="Sex" placeholder="Sex">
    </md-input-container>
  </div>
  <md-select placeholder="Select" fc-class="clear-select" fc-icon-class="clear-icon-select" fcclear ng-model="projectSelect">
    <md-option ng-value="project" ng-repeat="project in projects">Select Test</md-option>
  </md-select>
  <md-select placeholder="Multi Select" fc-class="clear-select" fc-icon-class="clear-icon-select" fcclear ng-model="projectSelect1" fc-clear-tip="清除" fc-model-type="array">
    <md-option ng-value="project" ng-repeat="project in projects">Select Test</md-option>
  </md-select>
</div>

经过包装的HTML文件如下:

<div ng-controller="DemoCtrl">
  <div layout="row">
    <div class="clear-content clear-name" flex="40">
      <md-input-container md-no-float="" class="md-default-theme">
        <input ng-model="name" placeholder="Name" class="ng-pristine ng-valid md-input ng-touched" aria-label="Name" id="input_3" tabindex="0" aria-invalid="false">
      </md-input-container>
      <ng-md-icon icon="cancel" size="18" class="clear-icon ng-hide" ng-click="name=&quot;&quot;" ng-show="name" aria-label="Clear" role="button" tabindex="0" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
          <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z">
          </path>
        </svg>
      </ng-md-icon>
    </div>
    ...
  </div>
</div>

Options:

fc-class: 包装div的样式
fc-icon-class: 清除icon的样式
fc-clear-tip: 清除icon的文本,默认为Clear
fc-model-type: 当被清除的model是Array时,需要手动指定此参数的值为‘array’

DEMO