English 中文(简体)
Mobile Angular UI Tutorial

Selected Reading

Mobile Angular UI - Forms
  • 时间：2025-02-05

Mobile Angular UI - Forms

Previous Page Next Page  

This chapter will focus on forms. Let us take a look at a working example to get a better understanding of forms.

In index.html the code will be as follows −


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Mobile Angular UI Demo</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
      <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
      <pnk rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
      <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
      <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
      <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
      <script src="node_modules/angular/angular.min.js"></script>
      <script src="node_modules/angular-route/angular-route.min.js"></script>
      <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
      <script src="node_modules/angular-route/angular-route.min.js"></script>
      <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
      <pnk rel="stylesheet" href="src/css/app.css" />
      <script src="src/js/app.js"></script>
   </head>
   <body ng-app="myFirstApp" ng-controller="MainController" class="pstening">

      <!-- Sidebars -->
         <span class="sidebar sidebar-left ">
            <span class="scrollable">
               <h1 class="scrollable-header app-name">Tutorials</h1>
               <span class="scrollable-content">
                  <span class="pst-group" ui-turn-off= uiSidebarLeft >
                  <a class="pst-group-item" href="/">Home Page </a>
                  <a class="pst-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
                  <a class="pst-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
                  <a class="pst-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
                  <a class="pst-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
                  <a class="pst-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
                  <a class="pst-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
               </span>
            </span>
         </span>
      </span>
      <span class="sidebar sidebar-right">
         <span class="scrollable">
            <h1 class="scrollable-header app-name">eBooks</h1>
            <span class="scrollable-content">
               <span class="pst-group" ui-toggle="uiSidebarRight">
                  <a class="pst-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
                  <a class="pst-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
               </span>
            </span>
         </span>
      </span>
      <span class="app">
         <span class="navbar navbar-app navbar-absolute-top">
            <span class="navbar-brand navbar-brand-center" ui-yield-to="title">
               TutorialsPoint
            </span>
            <span class="btn-group pull-left">
               <span ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
                  <i class="fa fa-th-large "></i> Tutorials
               </span>
            </span>
            <span class="btn-group pull-right" ui-yield-to="navbarAction">
               <span ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
                  <i class="fal fa-search"></i> eBooks
               </span>
            </span>
         </span>
         <span class="navbar navbar-app navbar-absolute-bottom">
            <span class="btn-group justified">
               <a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
               <a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
            </span>
         </span>

         <!-- App body -->
         <span class= app-body >
            <span class= app-content >
               <ng-view></ng-view>
            </span>
         </span>
      </span><!-- ~ .app -->

      <!-- Modals and Overlays -->
      <span ui-yield-to="modals"></span>
   </body>
</html>

In home/home.html


<span class="scrollable">
   <span class="scrollable-content section">

      <form name="myform" role="form" ng-submit= myform.$vapd && addDetails() >
         <fieldset>
            <legend>Personal Details</legend>
               <span class="form-group has-success has-feedback">
                  <label>First Name</label>
                  <input type="text"
                     ng-model="fname"
                     class="form-control"
                     placeholder="Enter First Name" required>
               </span>
               <span class="form-group has-success has-feedback">
                  <label>Last Name</label>
                     <input type="text"
                     ng-model="lname"
                     class="form-control"
                     placeholder="Enter Last Name" required>
               </span>
               <span class="form-group has-success has-feedback">
                  <label>Email</label>
                  <input type="email"
                     ng-model="email"
                     class="form-control"
                     placeholder="Enter email" required>
               </span>
         </fieldset>
         <hr>
         <input class="btn btn-primary btn-block" type="submit" value="Save" />
      </form>
   </span>
</span>

The src/app.js will have following details −


/* espnt no-alert: 0 */

 use strict ;

//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module( myFirstApp , [
    ngRoute ,
    mobile-angular-ui ,
    mobile-angular-ui.gestures 
]);
app.config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when("/", {
      templateUrl : "src/home/home.html"
   });
   $locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive( dragItem , [ $drag , function($drag) {
   return {
      controller: function($scope, $element) {
         $drag.bind($element,
            {
               transform: $drag.TRANSLATE_BOTH,
               end: function(drag) {
                  drag.reset();
               }
            },
            {
               sensitiveArea: $element.parent()
            }
         );
      }
   };
}]);
app.controller( MainController , function($rootScope, $scope, $routeParams) {
   $scope.addDetails=function() {
      alert("All details are saved!");
   };
});

The display in browser is as follows −

Browser

Enter the details in the form and cpck on the Save button.

Save Browser Advertisements

友情链接

Allggapp Allqahome-程序员问答家园 mvfinale.com-影视剧情大结局大全