Question

我有一个带<input>字段的搜索按钮。该按钮具有ng-click="run()"，可立即在输入字段内输入。单击按钮后是不是可以工作？

我是 AngularJS 的新手。此时陷入困境。提前谢谢。

<!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();
    }
  });

Answer 1

这是一个包含大部分代码的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>

点击工作而不点击

1 个答案: