Ionic/AngularJS и простой экран входа в систему

Я впервые тестирую Ionic/AngularJS и создаю простой логин с токеном, отправленным с мобильного.Ionic/AngularJS и простой экран входа в систему

У меня есть поле ввода для номера телефона и поля ввода для токена/кода.

Сначала отображается только поле ввода номера телефона, но когда пользователь запрашивает код, поле ввода кода должно стать видимым. Как только пользователь ввел четырехзначный код, кнопка должна перейти от «Получить код» в «Вход» и вызвать функцию с двумя параметрами.

Это мой код до сих пор: http://codepen.io/anon/pen/PZOOBz

Я вроде застрял с изменением текста кнопки и поведение после того, как пользователь вошел в номер телефона.

HTML:

<html ng-app="Hello"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 
    <link href="http://code.ionicframework.com/1.2.4/css/ionic.min.css" rel="stylesheet"> 
    <script src="http://code.ionicframework.com/1.2.4/js/ionic.bundle.min.js"></script> 
    </head> 
    <body> 
    <ion-nav-view></ion-nav-view> 
    <script id="templates/signin.html" type="text/ng-template"> 
     <ion-content> 
     <form name="signInForm" novalidate> 
      <div class="list list-inset"> 
      <label class="item item-input"> 
       <i class="icon ion-ios-telephone placeholder-icon"></i> 
       <input type="tel" ng-model="phoneNumber" ng-minlength="4" placeholder="Your Phone Number" required> 
      </label> 
      <label class="item item-input" ng-if="signInForm.$valid"> 
       <i class="icon ion-ios-locked placeholder-icon"></i> 
       <input type="text" ng-model="code" ng-minlength="4" ng-maxlength="4" placeholder="Your Code"> 
      </label> 
      </div> 
      <div class="padding"> 
      <button class="button button-block button-positive" ng-disabled="signInForm.$invalid" ng-click="signIn(phoneNumber)">Get Code</button> 
      </div> 
     </form> 
     </ion-content> 
    </script> 
    <script id="templates/home.html" type="text/ng-template"> 
     <ion-content> 
     </ion-content> 
    </script> 
    </body> 
</html>

JS:

angular.module('Hello', ['ionic']) 

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('signin', { 
     url: '/signin', 
     templateUrl: 'templates/signin.html', 
     controller: 'SignInCtrl' 
    }) 
    .state('home', { 
     url: '/home', 
     templateUrl: 'templates/home.html' 
    }); 

    $urlRouterProvider.otherwise('/signin'); 
}) 

.controller('SignInCtrl', function($scope, $state) { 
    $scope.signIn = function(phoneNumber, code) { 
    console.log('Sign In Phone Number', phoneNumber); 
    console.log('Sign In Code', code); 
    $state.go('home'); 
    }; 

    $scope.signIn = function(phoneNumber) { 
    console.log('Sign In Phone Number', phoneNumber); 
    }; 
});

источник

2016-01-19 Michael Nielsen

Вы можете использовать выражение как {{ButtonText}}.

JS:

angular.controller('SignInCtrl', function($scope) { 
    $scope.buttonText = 'bla'; 

    $scope.changeText = function() { 
      $scope.buttonText = 'foo'; 
    } 
});

HTML:

<button ng-click="changeText()">{{buttonText}}</button>

Не первый баттон бла как текст и после нажмите изменения текста из бла в Foo и будет rerendered.

источник

2016-01-19 09:25:47 user3232739

Это работает для изменения текста, да.Я признаю, что мой вопрос был не столь ясен, поэтому мне все еще нужно менять «ng-hide» динамически и «требуется» на элементах. Это так же легко? –

Я так плохо понимаю вашу логику.

Но ваша цель - изменить текст кнопки, когда длина phoneNumber равна 4 или более, верно?

так, ваш код кнопки можно записать как:

<button class="button button-block button-positive" ng-disabled="signInForm.$invalid" ng-click="signIn(phoneNumber, code)">{{ phoneNumber.length >= 4 ? 'Login In' : 'Get Code' }}</button>

И у меня есть совет.

В контроллере, просто написать функцию для входа в аккаунт, как это:

$scope.signIn = function(phoneNumber, code) { 
    if (typeof code === 'undefined') { 
     console.log('Sign In Phone Number', phoneNumber); 
    } 
    else { 
     console.log('Sign In Phone Number', phoneNumber); 
     console.log('Sign In Code', code); 
     $state.go('home'); 
    } 
};

источник

2016-01-19 10:00:38 Erichain

Моя логика не очень ясна. Я признаю это. Сначала я хочу иметь только поле ввода номера телефона. Кнопка должна быть отключена. когда поле номера телефона действительно, кнопка должна быть включена. Когда кнопка нажата, появится поле ввода кода, и кнопка изменения текста должна измениться. –

Ну, я вижу. Может быть, вы можете написать это. Я написал это в своем ручке. http://codepen.io/Erichain/pen/MKOVoO?editors=101 – Erichain

Вы можете использовать следующие,

В HTML

<input type="tel" placeholder="Enter Phone Number" data-ng-disabled="editing" ng-model="phono" ng-change="calPhoNo(phono)"></br> 
    <input type="text" placeholder="Enter Code" ng-model="code" ng-show="GetCode" ng-change="calSignIn(code)" ></br> 
    <button data-ng-disabled="!editing" ng-click="Calgetcode()" ng-show="ShowGetCode">Get Code</button> 
    <button data-ng-disabled="!editing" ng-show="ShowSignIn" ng-click="signIn()">Sign In</button></br></br>

В контроллере,

$scope.ShowGetCode=true; 
$scope.calPhoNo=function(no){ 
    if(no.length == 4){ 
    $scope.editing=true; 
    }else{ 
    $scope.editing=false; 
    } 
} 

$scope.Calgetcode=function(){ 
$scope.editing=false; 
$scope.ShowGetCode=false; 
$scope.GetCode=true; 
$scope.ShowSignIn=true; 
} 

$scope.calSignIn=function(no){ 
if(no.length == 4){ 
    $scope.editing=true; 
    }else{ 
    $scope.editing=false; 
    } 
} 

$scope.signIn=function(){ 
$location.path("/homepage"); 
}

См мой codpen:

http://codepen.io/mohanapriya/pen/NrrwQN?editors=1000

источник

2016-06-16 13:21:47 Priya

Ionic/AngularJS и простой экран входа в систему

ответ

Смежные вопросы