Question

当我点击链接时，ng-view呈现一个新的html页面，但是它默认为搜索框并在移动视图中放大页面。如果您不确定我的意思，请使用手机转到http://www.andrewhnovak.com，您将看到我的意思。如何才能将其默认设置为搜索框？

牛肉-Recipes.html

  <!DOCTYPE html>
        <html ng-app="RecipeSite">
        <head>

            <script src="bower_components/angular/angular.js"></script>
            <script src="bower_components/angular-route/angular-route.js"></script>
            <script src="bower_components/jquery/dist/jquery.js"></script>
            <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
            <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.2/ui-bootstrap-tpls.js"></script>
            <link rel="stylesheet" type="text/css" href="app.css">
            <script src="app.js"></script>
            <title></title>
        </head>
        <body>



        <div class="container">

                  <div class="row"> </div>
                           <div class="row top-buffer"> </div>
                <div ng-controller="RecipeController">
                <div class="row">
                <div class="col-md-offset-5 col-sm-offset-4">
            <form class="form-inline">
              <input ng-model="query" type="text" class="form-control"
                placeholder="Search Beef Recipes" autofocus>
            </form>


        </div>
         </div>

                <div class="row">

                    <div ng-repeat="recipe in BeefRecipes | limitTo: -12 | filter:query | orderBy: 'name' ">
                        <div class="col-md-3">   
                        <br><br>


                            <button class="btn btn-warning btn-lg" ng-click="open(recipe)"><img ng-src="{{recipe.image}}" alt="recipeImage" class="recipeImage"/><br>{{ recipe.name }}</button> <br />
                        </div>  
                    </div>

                      </div>
                </div><!--end recipeController-->


            </div><!--end container-->









        <!--MODAL WINDOW--> 
        <div class="container">

        <script type="text/ng-template" id="myModalContent.html">
          <div class="modal-header">

              <h2>Recipe </h2><h3>{{ recipe.name }}</h3>
          </div>

          <div class="modal-body">
            <div class="row">
            <div class="col-md-3">
          <img ng-src="{{recipe.image}}" class="recipeImageModal"/>
  </div>

       <br>
       <br>     
  <div class="col-md-offset-3 col-md-5 col-sm-offset-1 col-sm-5">

        <ul>

          <li>  {{"Cook Time: " + recipe.cookTime }}</li>
        <li> {{"Yield: " + recipe.yield}}</li>
        </ul>

        </div>
        </div>
         <div class="row top-buffer"> </div>
                 <div class="row">




            <div class="col-md-offset-2 col-md-6 col-sm-offset-2"><div id="ingredientLabel">Ingredients</div>

            </div>
</div>

<div class="ingredients">
<br>

        <div class="row">
        <div class="col-md-6 col-sm-6">
        <ul>
        <li>{{recipe.ingredient1}}</li>
        <li>{{recipe.ingredient2}}</li>
          <li>{{recipe.ingredient3}}</li>
            <li>{{recipe.ingredient4}}</li>
              <li>{{recipe.ingredient5}}</li>
                <li>{{recipe.ingredient6}}</li>
                  <li>{{recipe.ingredient7}}</li>
                    <li>{{recipe.ingredient8}}</li>
                      <li>{{recipe.ingredient9}}</li>
                        <li>{{recipe.ingredient10}}</li>
                          <li>{{recipe.ingredient11}}</li>
                            <li>{{recipe.ingredient12}}</li>
                              <li>{{recipe.ingredient13}}</li>
                                <li>{{recipe.ingredient14}}</li>
                                   <li>{{recipe.ingredient15}}</li>
                                      <li>{{recipe.ingredient16}}</li>
                                         <li>{{recipe.ingredient17}}</li>
                                           <li>{{recipe.ingredient18}}</li>
                                             <li>{{recipe.ingredient19}}</li>
                                               <li>{{recipe.ingredient20}}</li>

        </ul>
        </div>


     <div class="row">
            <div class="col-md-4 col-sm-4">
            <div class="directionsandlabel">   <div class="directionsLabel">
Directions</div>
<div class="directions">
            <ol>
          <li>  {{recipe.direction1}}</li>
<li>{{recipe.direction2}}</li>
<li>{{recipe.direction3}}</li>
<li>{{recipe.direction4}}</li>
<li>{{recipe.direction}}</li>
</ol>
</div>
            </div></div>
</div>


        </div>






        </div><!--end ingredients class-->

        </div>
        </div>
        </script>



        </body>
        </html>

移动网站默认为搜索框

0 个答案: