Angular.js - użycie tego samego kontrolera do dwóch różnych modeli

0

Witam, problem dotyczy tego samego co w temacie. Zrobiłem formularz, który posiada dwa inputy i przycisk submit. Problem jest taki, że nie wiem jak użyć tego samego kontrolera do tych dwóch inputów.
Dodam, że używam do tego probelmu OMDb API.

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/style.css">
    <style>[ng-cloak] { display: none; }</style>
    <title>ng-IMDb</title>
  </head>
  <body>
    <div class="container-fluid outerdiv" ng-app="myApp" ng-controller="MovieController">
  <div class="animated zoomInRight">
  <form class="search-actor">
    <div class="input-group search-bar">
      <input type="text" ng-model="search" class="form-control" placeholder="Enter full movie name" autofocus />
    </div>
    <div class="input-group search-bar">
      <input type="text" ng-model="search2" class="form-control" placeholder="Enter full movie name" autofocus />
    </div>
  </form>


  </div>
</div>
    <script src="js/angular.min.js"></script>
    <script src="js/ui-bootstrap-custom-tpls-0.14.3.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/imdbService.js"></script>
  </body>
</html>
 </code


angular.module('myApp', [])
.controller('MovieController', function($scope, $http) {
$scope.$watch('search', function() {
fetch();
});

$scope.search = "Sherlock Holmes";

function fetch() {
  $http.get("http://www.omdbapi.com/?t=" + $scope.search)
    .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.select = function() {
  this.setSelectionRange(0, this.value.length);
}

});

0

Nie wykorzystujesz tego, co w Angular najlepsze - two way data binding.

Powinieneś użyć dyrektywy ng-model, która "połączy" input ze scopem.

//template
		<label class="item-input-wrapper">
            <input type="text" placeholder="Enter movie name" id="movie-title" ng-model="movieTitle">
          </label>
          <label class="item-input-wrapper">
            <input type="text" placeholder="Enter movie name" id="movie-title2"  ng-model="movieTitle2">
          </label>

W controlerze możesz teraz użyć $scope.movieTitle i $scope.movieTitle2, np.:

//controler
Movies.get($scope.movieTitle);

1 użytkowników online, w tym zalogowanych: 0, gości: 1