Question

我使用以下代码在导航栏中添加搜索选项。它显示但我没有得到点击动作，例如：我想从用户点击搜索中的输入按钮和用户点击搜索按钮时从javascript获取操作。

<div class="col-xs-12 col-sm-4">
       <div><h6>Search book here</h6></div>  
        <form role="search">   
        <div class="input-group form-group" id="search-form">
            <input type="text" class="form-control" placeholder="Search title" name="search" id="search" >
               <div class="input-group-btn">
                  <button class="btn btn-default" type="submit" id='search-button'><i class="glyphicon glyphicon-search"></i></button>
               </div>
        </div>
       </form> 
      </div>

谢谢你。

Answer 1

是的，因为你需要为它提供由angularjs制作的ng-click指令。你可以这样做：

 var app = angular.module('YourApp', [])

 app.controller('myCtrl', ["$scope",
   function($scope) {
     $scope.search= function() {
       alert("Searching")
     }
   }
 ])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div ng-app="YourApp" ng-controller="myCtrl" class="col-xs-12 col-sm-4">
  <div>
    <h6>Search book here</h6>
  </div>
  <form role="search">
    <div class="input-group form-group" id="search-form">
      <input type="text" class="form-control" placeholder="Search title" name="search" id="search">
      <div class="input-group-btn">
        <button class="btn btn-default" ng-click="search()" type="submit" id='search-button'><i class="glyphicon glyphicon-search"></i>
        </button>
      </div>
    </div>
  </form>
</div>

或

使用vanilla.js提供的点击：

function search(){
  alert("Searching");
  }

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <div  class="col-xs-12 col-sm-4">
      <div>
        <h6>Search book here</h6>
      </div>
      <form role="search">
        <div class="input-group form-group" id="search-form">
          <input type="text" class="form-control" placeholder="Search title" name="search" id="search">
          <div class="input-group-btn">
            <button class="btn btn-default" onclick="search()" type="submit" id='search-button'><i class="glyphicon glyphicon-search"></i>
            </button>
          </div>
        </div>
      </form>
    </div>

添加单击操作以搜索bootsrap

1 个答案:

或