menuToggle在移动设备上不起作用,但在添加我的AngularJS模块时在桌面上工作

时间:2017-11-23 06:02:23

标签: javascript html css angularjs

我正在尝试使用AngularJS材质库添加自动提示。它现在对我来说很好。但现在问题是,当我添加 ng-App =“MyApp2”时,我的 menuToggle 按钮仅在移动设备中无法正常工作,但它在桌面设备上正常运行。 如果我正在添加 ng-App="" ,那么它的工作正常,但显然自动提示功能将停止工作。

我陷入了这个问题。请帮我... 预先感谢。

 <!DOCTYPE HTML>

<html>
    <head>
        <title>Booking | web</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />        
        <link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.5/angular-material.css'>
        <style>
            input.ng-touched.ng-invalid {
                box-shadow: 0 0 0 1px #ff0000;
            }

            input, select, textarea {
            color: Black;
            font-family: "Open Sans", Helvetica, sans-serif;
            font-size: 15pt;
            font-weight: 400;
            letter-spacing: 0.075em;
            line-height: 1.65em;
            }
        </style>
    </head>
    <body>

        <!-- Page Wrapper -->
        <div id="page-wrapper">

                <!-- Header -->
                    <header id="header" class="alt">
                            <h1><a href="index.php">web</a></h1>
                            <nav id="nav">
                                <ul>
                                    <li class="special">
                                        <a href="#menu" class="menuToggle"><span>Menu</span></a>
                                        <div id="menu">
                                            <ul>
                                                <li><a href="index.php">Home</a></li>
                                                <li><a href="price_calculator.php">Start Booking</a></li>
                                                <li><a href="about_us.php">About Us</a></li>
                                                <li><a href="enquiry.php">Enquiry</a></li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </nav>
                    </header>

                <!-- Main -->
                    <article id="main">
                        <header>
                            <h2>Price Calculator</h2>
                            <p>Calculate your trip cost </p>
                        </header>
                        <section id="three" class="wrapper style3 special">
                            <div class="inner">
                                <section  ng-controller="DCtrl as ctrl"  ng-app="MyApp2" ng-cloak>
                                     <form method="post" action="fare.php"  name="searchForm">
                                        <div class="row uniform">
                                                <div class="6u 12u$(xsmall)" style="width:100%">
                                                    <md-autocomplete  md-input-name="origin" ng-disabled="true" md-selected-item="ctrl.selectedItemO"  md-search-text="ctrl.searchTextO" md-items="item in ctrl.querySearchO(ctrl.searchText)" md-item-text="item.display" placeholder="From: Varanasi" >
                                                    </md-autocomplete>  
                                                </div>
                                                <div class="6u$ 12u$(xsmall)" style="width:100%; ">                                             
                                                    <md-autocomplete required="" flex="" md-input-name="destination" md-input-minlength="l" md-input-maxlength="18"         md-selected-item="ctrl.selectedItem"  md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)"     md-item-text="item.display" md-require-match="" placeholder="Destination City" >
                                                        <md-item-template>
                                                            <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
                                                        </md-item-template>
                                                        <md-not-found>
                                                            No matches found.
                                                        </md-not-found>
                                                    </md-autocomplete>
                                                    <div ng-messages="searchForm.destination.$error" ng-if="searchForm.destination.$touched">
                                                        <div ng-message="required" style="color:#ff0000;">You <b style="color:#ff0000;">must</b> have a destination.</div>
                                                        <div ng-message="md-require-match" style="color:#ff0000;">Please select an existing city.</div>
                                                        <div ng-message="minlength">Your entry is not long enough.</div>
                                                        <div ng-message="maxlength">Your entry is too long.</div>
                                                    </div>  
                                                </div>                                              
                                                <div class="6u$ 12u$(xsmall)" style="width:100%">
                                                    <ul class="actions vertical">
                                                        <li><input type="submit" value="Calculate" class="special"
                                                            ng-disabled="searchForm.destination.$untouched || searchForm.destination.$invalid" />
                                                        </li>                                                       
                                                    </ul>
                                                </div>
                                        </div>
                                    </form>                                     
                                </section>                          
                            </div>
                        </section>                          
                    </article>

                <!-- Footer -->
                    <footer id="footer">
                        <ul class="icons">
                            <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                            <li><a href="https://www.facebook.com/justcaritdotcom/" target="_blank" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                            <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
                            <li><a href="#" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
                        </ul>
                        <ul class="copyright">
                            <li>&copy; Made with <i class="fa fa-heart" aria-hidden="true" style="color:#cc0052;"></i> for <a href="index.php">web</a></li>
                        </ul>
                    </footer>
        </div>



            <!-- Scripts -->
            <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js'></script>
            <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script>
            <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script>
            <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script>
            <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script>
            <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
            <script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.5/angular-material.js'></script>

            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/jquery.scrollex.min.js"></script>
            <script src="assets/js/jquery.scrolly.min.js"></script>
            <script src="assets/js/skel.min.js"></script>
            <script src="assets/js/util.js"></script>
            <!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
            <script src="assets/js/main.js"></script>

            <script>
                    (function () {
                          'use strict';
                          angular
                              .module('MyApp2',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
                              .controller('DCtrl', DCtrl);

                          function DCtrl ($timeout, $q) {
                            var self = this;

                            self.states        = loadAll();
                            self.selectedItem  = null;
                            self.searchText    = null;
                            self.querySearch   = querySearch;

                            function querySearch (query) {
                              var results = query ? self.states.filter( createFilterFor(query) ) : self.states;
                              var deferred = $q.defer();
                              $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
                              return deferred.promise;
                            }

                        function loadAll() {
                          var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
                                  Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
                                  Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
                                  Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
                                  North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
                                  South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
                                  Wisconsin, Wyoming';

                          return allStates.split(/, +/g).map( function (state) {
                            return {
                              value: state.toLowerCase(),
                              display: state
                            };
                          });
                        }

                        function createFilterFor(query) {
                          var lowercaseQuery = angular.lowercase(query);

                          return function filterFn(state) {
                            return (state.value.indexOf(lowercaseQuery) === 0);
                          };

                        }
                      }
                    })();

            </script>

    </body>
</html>

1 个答案:

答案 0 :(得分:0)

如果你删除像[ng-App =&#34;&#34;]那么显然角度失败,因为没有定义应用程序,显然任何其他功能都可以工作,不属于角度。您需要观察两种功能应该结合使用。

无论如何,您的代码工作正常,请勿删除 ng-app name 。弄清楚如何在不影响上述情况的情况下进行菜单切换。

#include<stdio.h>
#include<string.h>
#define MAXLEN 100
int main()    
{

  char str1[MAXLEN];    
  char str2[MAXLEN];

  printf("\n Enter the first line\n");    
  if( fgets(str1,MAXLEN,stdin) ){
     str1[strcspn(str1,"\n")]='\0';
  }
  else {
     fprintf(stderr,"Line not read");
     exit(EXIT_FAILURE);
  }

  printf("\n Enter the second line\n");
  if( fgets(str2,MAXLEN,stdin) ){
     str2[strcspn(str2,"\n")]='\0';
  }   
  else {
     fprintf(stderr,"Line not read");
     exit(EXIT_FAILURE);
  } 

  printf("\n The strings are \n(%s)  \n%s \n",str1,str2);  
  return EXIT_SUCCESS;   
}