Question

我尝试在输入字段上添加边框。我可以在文本字段上添加边框但是它适用于整个部分。我需要仅在输入字段添加边框，直到字符开始滚动。换句话说，如果你开始在几个字符之后开始在输入字段上输入，它开始水平滚动我需要添加边框，而不是整个输入宽度。

这是我的代码 http://codepen.io/anon/pen/oXvKeb

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Sign-in, Then Tabs Example</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>

  <body>

    <ion-header-bar class="bar-balanced">

    <h1 class="title">Station ID</h1>


</ion-header-bar>


<ion-content>
    <div class="list">
        <label class="item item-input">
            <span class="input-label">StationName</span>
            <input type="text" ng-model="user.username" class="bdr">
        </label>
        </div>
</ion-content>

<ion-footer-bar class="bar-balanced">
    <h1 class="title">Footer!</h1>
</ion-footer-bar>








  </body>
</html>

我添加了课程＆＃34; bdr＆＃34;

Answer 1

我认为您可以使用ng-class和ng-change。

来实现

您的文字字段应为

在控制器中添加一些代码

     $scope.customClassName=undefined;
     $scope.changeBorder=function(){
       $scope.customClassName=undefined;
       if(user.username.length>1){
       $scope.customClassName="bdr";
      }    
}

如果在输入字段中写入任何值，则该函数将执行并检查条件，最后将ng-class更新为原始类:)

为什么边框没有设置在输入字段？

1 个答案: