angular的input标签的问题

最新推荐文章于 2023-08-23 15:19:35 发布

火夆

最新推荐文章于 2023-08-23 15:19:35 发布

阅读量968

点赞数

分类专栏： angular input web

本文链接：https://blog.csdn.net/little_beauty/article/details/80978806

版权

angular 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

input

1 篇文章 0 订阅

订阅专栏

web

1 篇文章 0 订阅

订阅专栏

由于原生的input的单选和多选框太丑，博主实际开发过程中用到下面两种方法来修改样式，另外还有ng-pattern校验输入框,

效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>试验</title>
<script type="text/javascript" src="http://s.zys.me/js/ng/angular.js"></script>

<style>
  .custom-checkbox {
    position: relative;
}

.custom-checkbox input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    margin: 0;
}

.custom-checkbox input:hover + label {
    box-shadow: 0 0 5px #70b0c4;
}

.custom-checkbox label {
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    border: 1px solid #70b0c4;
    display: inline-block;
    vertical-align: middle;
}

.custom-checkbox input[type="checkbox"]:checked + label::after {
    content: '✓';
    font-size: 16px;
    font-weight: bold;
    color: #70b0c4 !important;
}

.custom-radio {
    position: relative;
}

.custom-radio input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    margin: 0;
}

.custom-radio input:hover + label {
    box-shadow: 0 0 5px #70b0c4;
}

.custom-radio label {
    display: inline-block;
    box-sizing: border-box;
    border: solid 1px #70b0c4;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    border-radius: 50%;
    vertical-align: middle;
}

.custom-radio input[type="radio"]:checked + label {
    padding: 2px;
    background-color: #70b0c4;
    background-clip: content-box;
}

.custom-select {
    position: relative;
    z-index: 0;
}

.custom-select select {
    border: solid 1px #ddd;
    border-radius: 2px;
    background: transparent;
    height: 30px;
    min-width: 80px;
    line-height: 100%;
    padding-left: 5px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding-right: 14px;
    cursor: pointer;
}

.custom-select select::-ms-expand {
    display: none;
}

.custom-select label {
    display: inline-block;
    position: absolute;
    z-index: -1;
    right: 5px;
    top: -4px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 8px solid #70b0c4;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
.error{
  border:1px solid red; 
}
</style>


</head>
<body ng-controller="TestCtrl">
  <form name="postData">
<div>
    <h2>单选</h2>
    <label>
      <span class="custom-radio">
        <input type="radio" ng-value="'1'" name="nuclearType" ng-model="isBool"/><label></label>
      </span>是 
    </label>
    <label>
      <span class="custom-radio">
        <input type="radio" ng-value="'0'" name="nuclearType" ng-model="isBool"/><label></label>
      </span>否
  </label>
</div>
<div>
    <h2>多选</h2>
    <label>
      <span class="custom-checkbox">
          <input type="checkbox" ng-model="a"  /><label></label>
      </span> 书
    </label>
    <label>
      <span class="custom-checkbox">
        <input type="checkbox" ng-model="b"/><label></label>
      </span> 笔
    </label>
</div>
<div>
  <h2>使用filter模拟input单选或多选</h2>
  <img class="cursor-pointer" ng-src="images/{{december | checkboxImg}}" ng-init="december=false" ng-click="december=!december">
</div>

<div>
  <h2>使用ng-pattern 校验输入框</h2>
  <input name="phone" ng-pattern="/[0-9]{11}/" ng-class="{true:'error'}[postData.phone.$invalid]"  type="text" ng-model="tel">
</div>
</form>

 

<script>
  angular.module('app', [], angular.noop)
    .controller('TestCtrl', function($scope){
      $scope.isBool = "1";
      $scope.a = true;
    })
    .filter("checkboxImg", function(){
      return function(flag) {
          if(flag !== null){
              return flag? "sel.png": "check.jpg";
          } else{
              return ""
          }
      }
  })
angular.bootstrap(document.documentElement, ['app']);
</script>
</body>
</html>

火夆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular的input标签的问题

//ng-pattern 输入框校验使用正则校验&lt;input name="phone" ng-pattern="/[0-9]{11}/" ng-class="{true:'error'}[postData.phone.$invalid]" class="table-input" type="text" ng-model="form.phone"&gt;...
复制链接

扫一扫

专栏目录