javascript - 如何在 ionic mobile 中的 html 中输入 10 位数字时突出显示键盘按钮

Question

我创建了一个登录页面，如果用户输入 10 位数字的手机号，它应该自动突出显示键盘中的一个按钮。任何人都可以告诉我如何突出显示登录页面中的按钮。我已经使用 ion-keyboard t 创建我的键盘。

HTML:

<ion-view class="ApphomeTheme">
<ion-pane id="login-1">
    <ion-content>
      <div class="Login">
        <img src="main/assets/images/Home-logo.png">
        <h3>Kanakupillai</h3>
      </div>
    <p id="login-header">Login</p>
    <p id="pin-title">Enter Your Phone number :</p>
        <div id="pin">
            <div>{{vm.mobile_no.substring(0, 1)}}</div>
            <div>{{vm.mobile_no.substring(1, 2)}}</div>
            <div>{{vm.mobile_no.substring(2, 3)}}</div>
            <div>{{vm.mobile_no.substring(3, 4)}}</div>
            <div>{{vm.mobile_no.substring(4, 5)}}</div>
            <div>{{vm.mobile_no.substring(5, 6)}}</div>
            <div>{{vm.mobile_no.substring(6, 7)}}</div>
            <div>{{vm.mobile_no.substring(7, 8)}}</div>
            <div>{{vm.mobile_no.substring(8, 9)}}</div>
            <div>{{vm.mobile_no.substring(9, 10)}}</div>                
            <i class="icon ion-backspace" ng-show="vm.canErase" on-touch="vm.doErase()"></i>
        </div>

        <p id="pin-title1" ui-sref="presignup">{{"notmember_message" | translate}}</p>
    </ion-content>
    <ion-digit-keyboard settings="keyboardSettings"></ion-digit-keyboard>
</ion-pane>

脚本:

// Submit login
  rightButton: {
    html: '<i class="icon ion-log-in"></i>',
    action: function () {
      $log.log('vm.mobile_no: ', vm.mobile_no);
      var data = [{field: vm.mobile_no, type: 'tel', name: 'Mobile number'}];
      CommonService.validate(data).then(function () {
        $state.go('login', {loginDetails: vm.mobile_no});
      }, function (err) {
        CommonService.toast(err);
      });
    },
    style: {
      color: '#fff',
      bgColor: 'transparent',
      activeBgColor: 'rgba(0, 0, 0, 0.50)',
      borderColor: 'transparent'
    }
  }
};

我想在用户输入 10 个数字手机号码后突出显示此右侧按钮。

Answer 1

尝试在您的手机号码上放置 ng-click 指令，并在与 ng-click 绑定(bind)的函数中添加计数。

然后在您的样式属性中，您可以使用如下条件:

 style: {
      color: count >= 10 ? '#FFFF00' : '#fff',
      bgColor: 'transparent',
      activeBgColor: 'rgba(0, 0, 0, 0.50)',
      borderColor: 'transparent'
    }