ng点击工作不点击

我有一个搜索按钮，<input>字段。该按钮有ng-click="run()"，它立即在输入字段内输入。点击按钮后它不是工作吗？我是AngularJS。在这一点上陷入困境。在此先感谢。ng点击工作不点击

<!DOCTYPE html> 
 
<html lang="en" ng-app="myApp" ng-controller="MovieController"> 
 
    <head> 
 
    <title ng-bind="'trivago.com: ' + details.Title"></title> 
 
    <link rel="stylesheet" href="css/animate.min.css"> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 

 

 

 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, userscalable=no"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    
 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
 

 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta charset="utf-8"> 
 
    </head> 
 

 
    <body> 
 
    <div class="container-fluid outerdiv"> 
 
     <nav class="navbar navbar-fixed-top"> 
 
     <div class="container-fluid" style="border-bottom:2px solid #C1C3C5;"> 
 
      <div class="navbar-header"> 
 
      <a class="navbar-brand" href="#"><b><span style="color:#027FAE;">tri</span><span style="color:#F48E05;">va</span><span style="color:#C84735;">go</span></b><!--<span class="span-style">Movie Browser</span>--></a> 
 
      <a class="fa fa-heart" href="#"></a> 
 
      <a class="navbar-brand" href="#">GBP</a> 
 
      <a class="navbar-brand" href="#">EN</a> 
 
      <a class="navbar-brand" href="#">MY PROFILE</a> 
 
      </div> 
 
     </div> 
 
     </nav> 
 

 
     <noscript> 
 
     <div class="nojs">Javascript is either disabled or not supported in your browser. Please enable it or use a Javascript enabled browser.</div> 
 
     </noscript> 
 

 
     <center><div class="az"> 
 
     <!--<div class="animated zoomInRight">--> 
 
     <p class="text-center" style="color:#057AA9; font-size:28px;">Find your ideal hotel <br>for the best price </p> 
 
     <div class="input-group search-bar animatedz"> 
 
      <input float="right" type="text" ng-model="search" ng-model-options="{ debounce: 800 }" class="form-control" autofocus /> 
 
      <span class="input-group-btn"> 
 
      <button class="btn btn-primary" type="button" ng-click="run()">Search</button> 
 
      </span> 
 
     </div> 
 

 
     <div id="main-info" ng-include="'partials/main-info.html'" class="col-md-8"></div> 
 

 

 
     <!--<div id="related-results" ng-include="'partials/related-results.html'" class="col-md-4 animated bounce related-results"></div>--> 
 
     </div></center> 
 
    </div> 
 

 
    <script src="js/angular.min.js"></script> 
 
    <script src="js/app.js"></script> 
 

 
    <div class="container footer"> 
 
     <div class="col-xs-4"> 
 
      <center><a href="#"><i class="fa fa-search"></i></a></center> 
 
      <p class="text-center">Find your ideal hotel at the best price <br> with the world's largest hotel search</p> 
 
     </div> 
 

 
     <div class="col-xs-4"> 
 
      <center><i class="material-icons">&#xE85C;</i></center> 
 
      <p class="text-center">Compare over 1 million hotels<br>from 250+ sites</p> 
 

 
     </div> 
 

 
     <div class="col-xs-4"> 
 
      <center><a href="#"><i class="fa fa-smile-o"></i></a></center> 
 
      <p class="text-center">Read the unbiased and <br>accurate traveller reviews</p>   
 
     </div> 
 
    </div> 
 

 
    </body> 
 
</html>

app.js：

'use strict'; 


    $scope.search = "Up"; 

    function fetch(){ 
     $http.get("http://www.omdbapi.com/?t=" + $scope.search + "&tomatoes=true&plot=full") 
     .then(function(response){ $scope.details = response.data; }); 

     $http.get("http://www.omdbapi.com/?s=" + $scope.search) 
     .then(function(response){ $scope.related = response.data; }); 
    } 

    $scope.update = function(movie){ 
     $scope.search = movie.Title; 
    }; 

    $scope.run= function(){ 
     fetch(); 
    } 
    });

来源

2017-02-02 Amina Nasrin

你缺少的代码的某些部分。可以复制问题的“实际”示例对于找到解决方案非常有用。 –

Google搜索栏的工作方式。我们在Google搜索栏中输入内容，并向我们展示最接近的匹配项。但我希望它在点击搜索按钮后显示结果。 –

这很清楚。但正如我之前所说的，上面的代码并不完整，从你提供的部分来看，问题并不明显。提供完整的代码，将复制你的问题 - 工作示例。 –

这里的工作example与大部分代码，希望它帮助。

function exampleController($scope, $http) { 
 
    function fetch() { 
 
    $http.get("http://www.omdbapi.com/?t=" + $scope.search + "&tomatoes=true&plot=full") 
 
     .then(function(response) { 
 
     
 
     $scope.details = response.data; 
 
     }); 
 

 
    $http.get("http://www.omdbapi.com/?s=" + $scope.search) 
 
     .then(function(response) { 
 
     $scope.related = response.data; 
 
     }); 
 
    } 
 

 
    $scope.update = function(movie) { 
 
    $scope.search = movie.Title; 
 
    }; 
 

 
    $scope.run = function() { 
 
    fetch(); 
 
    }; 
 
} 
 

 
angular 
 
    .module('app', []) 
 
    .controller('exampleController', exampleController);

.container-fluid { 
 
    background-color: #1D1F20; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
} 
 
.row { 
 
    padding: 10px; 
 
} 
 
.input { 
 
    color: #333; 
 
} 
 

 
pre { 
 
    margin-bottom: 10%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="container-fluid" ng-app="app"> 
 
    <div class="container" ng-controller="exampleController"> 
 
    <div class="row"> 
 
     <input class="input" type="text" ng-model="search" /> 
 
    </div> 
 
    <div class="row"> 
 
     <button class="btn btn-primary" ng-click="run()">Start Search</button> 
 
    </div> 
 
    <div class="row"> 
 
     <pre ng-bind="details | json"></pre> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-02-03 16:04:56 alphapilgrim

ng点击工作不点击

回答

相关问题