Javascript AngularJS-$http，带绑定参数

我搜索了又搜索，但也许我不知道该用什么词来表达我的意图。这是我第一次尝试使用AngularJS应用程序，如果您能提供任何指导，我将不胜感激

我有一个包含以下内容的基本HTML页面：

<div ng-app="testApp">
    <div ng-controller="SearchCtrl">
        <input type="text" ng-model="params.firstName">
        <input type="text" ng-model="params.lastName">
        <h1>{{ searchString() }}</h1>

        <table>
            <tr ng-repeat="employee in results">
                <td>{{employee}}</td>
            </tr>
        </table>
    </div>
</div>

var testApp = angular.module('testApp' []);

testApp.factory('Data', function() {
    return {
        firstName: "", lastName: ""
    }
})

function SearchCtrl($scope, Data, $http) {
    $scope.params = Data;

    $scope.searchString = function() {
        return 'fname=' + $scope.params.firstName + '&lname=' + $scope.params.lastName;
    }
}

这样，我的函数就可以正确绑定，h1标记中的代码就会动态更新。我想做的是根据搜索字符串动态更新$http get请求的结果。我在控制器中有这样的代码，它会执行，但不会在绑定变量每次更新时更新

$http.get('results.php?' + $scope.searchString)
    .then(
        function(res) {
            $scope.results = res.data;
});

我肯定我缺少AngularJS的一个主要概念/组件。如何在绑定变量每次更改时触发$http调用

感谢您提供的任何帮助

编辑

使用params对象尝试@Sprottenwels建议的机会：

$http.get('results.php?', { 
    params: { fname: $scope.firstName, lname: $scope.lastName } 
})
.then(function(res) { 
        $scope.results = res.data; 
    });
});

调用发生时没有错误，但Chrome控制台中的两个参数都为空（results.php？fname=&lname=）

编辑2

页面加载时，进行以下调用：

results.php?fname=&lname=

$scope的日志显示以下相关元素：

params: firstName: "", lastName: ""
searchString: function() { ... }

---

有道理。使用页面上的输入框编辑绑定变量会更新searchString（使用{{searchString（）}}正确显示在h1标记中），但不会再次进行$http调用。

$http.get希望传递一个

params

对象

  $http.get('results.php',{
            params:{
                searchString: $scope.searchString
            }
        }).then(function(promise){
            // ...
        });

---

有关更多信息，请参阅。（在下面，在“用法”下面）

有一个答案出现在这里，然后消失了——但我抓住了它，并且能够从中得到我需要的东西。多亏了贴这封信的人——对不起，我没听清你的名字

显然，我要找的是$watch函数。通过观察一个变量，我得到了$http调用在每次更改时都会发生

$scope.$watch($scope.firstName, function() {
    $http.get('results.php', {
        params: {
            fname: $scope.params.firstName,
            lname: $scope.params.lastName
        }
    })
    .then(
        function(res) {
            $scope.results = res.data;
        });
});

我也为lastName参数重复了这个监视代码

---

希望这能帮助其他有同样问题的人。感谢Sprottenwels对我的第一个SO问题的帮助

我尝试过类似的操作，与我的其他代码相同，调用使用参数执行，但传递$scope.params.firstName会导致一个“空白”调用。我可以在Chrome控制台中看到调用，该控制台有：results.php？fname=&lname=我是新来的，我在哪里添加这个？回到原来的问题？或者作为一个单独的答案？

code

http.get（'results.php？'，{params:{fname:$scope.firstName，lname:$scope.lastName}}）。然后（函数（res）{$scope.results=res.data；}）；}）；只需将其添加到原始问题中，预先标记为编辑：）完成！谢谢你的帮助。这些年来，这个社区帮助我学到了很多东西——这是我第一次找不到一个已经有用的答案（可能是因为我不知道要寻找什么）。我不得不承认，我已经智穷了。在您进行调用并发布结果的那一刻，您能否

console.log（）

您的$scope属性？我相信您的问题过于复杂了。您不需要自己构建searchString，Angular将为您处理此问题：

params

对象中给定的属性将连接到正常工作的

get

。还有，是什么触发了调用？根据我的编辑2，我实际上没有在该上下文中使用searchString，只是用于在页面上显示。我的问题是没有任何东西在启动呼叫。我以为控制器中的代码是在绑定变量更改时执行的-这是我的问题。哎呀，我搞错了，对不起。也许你可以试着重现这个问题，希望比我更合适的人能看看你的问题：/