آموزش سوییچ تغییر وضعیت در برنامه نویسی انگولار

3 سال پیش

آموزش سوییچ تغییر وضعیت در برنامه نویسی انگولار

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش سوییچ تغییر وضعیت در برنامه نویسی انگولار خواهیم پرداخت.

UI Angular Mobile با استفاده از دستورالعمل ui-switch عناصر سوئیچ را تغییر وضعیت می کند. دستورالعمل سوئیچ ui هنگام استفاده از مقدار Boolean ngModel تغییر وضعیت می شود.

در اینجا مثالی از Toggle Switch آورده شده است.

<!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" />
      <link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
      <link 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>
      <link rel="stylesheet" href="src/css/app.css" />
      <script src="src/js/app.js"></script>
      <style>
         a.active {
            color: blue;
         }
      </style>
   </head>

   <body ng-app="myFirstApp" ng-controller="MainController" class="listening">
      <!-- Sidebars -->
      <div class="sidebar sidebar-left ">
         <div class="scrollable">
            <h1 class="scrollable-header app-name">Tutorials</h1>
            <div class="scrollable-content">
               <div class="list-group" ui-turn-off='uiSidebarLeft'>
                  <a class="list-group-item" href="/">Home Page </a>
                  <a class="list-group-item" 
                  href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
                  <a class="list-group-item" href="#/bigdata">
                  <i class="fa fa-caret-right"></i>Big Data & Analytics </a>
                  <a class="list-group-item" href="#/computerProg"><i 
                  class="fa fa-caret-right"></i>Computer Programming </a>
                  <a class="list-group-item" href="#/computerscience"><
                  i class="fa fa-caret-right"></i>Computer Science </a>
                  <a class="list-group-item" href="#/databases"><i 
                  class="fa fa-caret-right"></i>Databases </a>
                  <a class="list-group-item" 
                  href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
               </div>
            </div>
         </div>
      </div>
      <div class="sidebar sidebar-right">
         <div class="scrollable">
            <h1 class="scrollable-header app-name">eBooks</h1>
            <div class="scrollable-content">
               <div class="list-group" ui-toggle="uiSidebarRight">
                  <a class="list-group-item" href="#/php"><i class=
                  "fa fa-caret-right"></i>PHP </a>
                  <a class="list-group-item" 
                  href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
               </div>
            </div>
         </div>
      </div>
      <div class="app">
         <div class="navbar navbar-app navbar-absolute-top">
            <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
               TutorialsPoint
            </div>
            <div class="btn-group pull-left">
               <div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
                  <i class="fa fa-th-large "></i> Tutorials
               </div>
            </div>
            <div class="btn-group pull-right" ui-yield-to="navbarAction">
               <div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
                  <i class="fal fa-search"></i> eBooks
               </div>
            </div>
         </div>
         <div class="navbar navbar-app navbar-absolute-bottom">
            <div 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>
            </div>
         </div>

         <!-- App body -->
         <div class='app-body'>
            <div class='app-content'>
               <ng-view></ng-view>
            </div>
         </div>
      </div><!-- ~ .app -->
      
      <!-- Modals and Overlays -->
      <div ui-yield-to="modals"></div>
   
   </body>
</html>

app.js

/* eslint no-alert: 0 */

'use strict';

//n mobile-angular-ui
//
var app=angular.
// Here is how to define your module
// has dependent omodule('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.controller('MainController', function($rootScope, $scope, $routeParams) {
   $scope.msg="Welcome to TutorialsPoint!";
});

src/home/home.html

<div class="scrollable">
   <div class="scrollable-content">
      <form>
         <h1>Testing Toogle Switch </h1>
         <ui-switch id="enabled" name="enabled" ng-model="enabled" class="green"></ui-switch>
         <p>{{ enabled }}</p>
      </form>
   </div>
</div>

خروجی به صورت زیر می باشد

آموزش سوییچ تغییر وضعیت در برنامه نویسی انگولار

منبع.

لیست جلسات قبل آموزش برنامه نویسی انگولار

برچسب ها : آموزش انگولار آموزش برنامه نویسی موبایل

نویسنده مطلب erfan molaei

آموزش سوییچ تغییر وضعیت در برنامه نویسی انگولار

آموزش سوییچ تغییر وضعیت در برنامه نویسی انگولار

app.js

src/home/home.html

لیست جلسات قبل آموزش برنامه نویسی انگولار

دیدگاه شما

بدون دیدگاه

آموزش سوییچ تغییر وضعیت در برنامه نویسی انگولار

app.js

src/home/home.html

لیست جلسات قبل آموزش برنامه نویسی انگولار

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه