如何使用'ng-model' AngularJS更新控制器变量？

我正在尝试使用 ng-model 通过文本框获取用户输入，并附加到 http.get 调用的基本 URL，如下所示;

索引.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>

搜索控制器.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 时，我可以看到追加没有根据文本框中的值进行更新。我对 Angular 很陌生，我不知道我做错了什么。我应该怎么做才能解决这个问题？

现在，我看到了这个问题。加载控制器时，它会执行控制器代码。这意味着 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;
                });
            };
        } ]);

相关内容

最新更新

热门标签：