📜  移动Angular UI-表单

📅  最后修改于: 2020-12-08 05:37:08             🧑  作者: Mango


本章将重点介绍表格。让我们看一个工作示例,以更好地理解表单。

在index.html中,代码如下-

在home / home.html中

Personal Details

src / app.js将具有以下详细信息-

/* eslint 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!");
   };
});

浏览器中的显示如下-

浏览器

在表单中输入详细信息,然后单击“保存”按钮。

保存浏览器