'ng-model'으로 컨트롤러 변수를 업데이트하는 방법 AngularJS?

-1

ng-model을 사용하여 텍스트 입력란을 통해 사용자 입력을 얻고 http.get 호출의 기본 URL을 follow와 같이 추가하려고합니다.'ng-model'으로 컨트롤러 변수를 업데이트하는 방법 AngularJS?

index.html을 :

<html ng-app='vidRoute'> 
    <head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Search Video</title> 
     <link rel="stylesheet" href="app/css/custom/main.css"> 
     <link rel="stylesheet" href="app/css/custom/responsive.css"> 
    </head> 

    <body> 
     <div id='mainwrapper'> 
      <div id='header' ng-controller="searchController"> 
       <input type="text" id="searchTxt" ng-model="append"> 
       <a href="#/search" id="searchBtn">Search Video</a> 
      </div> 

      <div id="poster"> 
       <div ng-view></div> 
      </div> 
     </div>  

     <script type="text/javascript" src="app/javascript/vendor/jquery-2.1.1.js"></script> 
     <script type="text/javascript" src="app/javascript/vendor/angular.js"></script> 
     <script type="text/javascript" src="app/javascript/vendor/angular-route.js"></script> 
     <script type="text/javascript" src="app/javascript/vendor/angular-resource.js"></script> 
     <script type="text/javascript" src="app/javascript/vendor/angular-mocks.js"></script> 
     <script type="text/javascript" src="app/javascript/custom/searchcontroller.js"></script> 
     <script type="text/javascript" src="app/javascript/custom/vidRoute.js"></script> 
    </body> 
</html>

searchcontroller.js

'use strict'; 

var vidcontrol = angular.module("vidcontrol", []); 

vidcontrol.controller("vidcontroller", ['$scope', '$http', function($scope, $http) { 
    $http.get('http://api.themoviedb.org/3/tv/airing_today?api_key=d5e87524383e2872a9555990b268dc5b').success(function(response) { 
     $scope.results = response.results; 
    }); 
}]); 

vidcontrol.controller('searchController', ['$scope', '$http', 
    function ($scope, $http) { 
     var url = "http://api.themoviedb.org/3/search/movie?api_key=d5e87524383e2872a9555990b268dc5b&query="; 
     // var searchTxt = $('#searchTxt').val();// this works fine when used 
     var searchUrl = url + append; //$scope.append also logs 'undefined' on the console 
     $http.get(searchUrl).success(function (response) { 
      $scope.searchResults = response.results;  
     }); 
    }]);

하지만 난 어떤 응답을받지 못했습니다. 콘솔에서 searchUrl을 로그 할 때 append가 텍스트 상자의 값에 따라 업데이트되지 않았 음을 알 수있었습니다. 저는 앵귤러를 처음 접했고 내가 뭘 잘못하고 있는지 알 수 없습니다. 이 문제를 해결하려면 어떻게해야합니까?

출처

2014-12-21 dat_sunday

APPEND이 코드의 아무 곳이나 정의되지 않은 것 ... 난 당신이 함께 $의 scope''에서 그것을 읽을 필요가 확실 해요 당신이 여기 쓰는 방법. –

$ scope.append를 사용하면 'undefined'가됩니다. –

이제는 문제가 있습니다. 컨트롤러가로드되면 컨트롤러 코드를 실행합니다. 뷰가 빌드되기 전에 REST 쿼리가 실행된다는 의미입니다. 그것이 정의되지 않은 문제를 보는 이유입니다. 해결책은 컨트롤러에서 "비디오 검색"을 클릭 할 때 호출 될 메소드를 정의하는 것입니다.

업데이트보기

<a href="#/search" id="searchBtn" ng-click="search()">Search Video</a> //Look at ng-click

업데이트 컨트롤러 :

vidcontrol.controller('searchController', ['$scope', '$http',function($scope, $http) { 
      var url = "http://api.themoviedb.org/3/search/movie?api_key=d5e87524383e2872a9555990b268dc5b&query="; 
      $scope.search = function(){ // Look at here, Defined a method to invoke on "Search Video" link click 
       var searchUrl = url + $scope.append; 
       $http.get(searchUrl).success(function(response) { 
        $scope.searchResults = response.results; 
       }); 
      }; 
     } ]);

출처

2014-12-21 19:14:58 Sreedhar

var searchUrl = url + $ scope.append를 사용할 때 searchUrl = http://api.themoviedb.org/3/search/movie?api_key=d5e87524383e2872a9555990b268dc5b&query=undefined가 있습니다. 즉 $ scope.append가 정의되지 않았습니다. –

"vidcontrol"모듈 코드를 게시하고 "vidRoute"모듈 ()을 사용하고 있음을 깨달았습니다. "vidRoute"모듈을 올릴 수 있습니까? 및 해당 컨트롤러 "searchController"컨트롤러. – Sreedhar

내 라우팅을 처리하는 모듈은 vidRoute입니다 –

'ng-model'으로 컨트롤러 변수를 업데이트하는 방법 AngularJS?

답변

관련 문제