1

所以我正在尝试将我的应用程序从 jQuery 转换为 angularjs。

我想创建一个动态显示的框，它根据用户输入显示从 mySQl 数据库中获取的数据。

我的 PHP 脚本返回一个 JSON。

我设置了我的<div>和一个<input>字段：

<input type="text" ng-model="testActivator">

<div class="Container" ng-show="Activator.length" ng-controller="ContainerCtrl">
        <p>{{fetchData(testActivator)}}</p>
</div>

我创建了我的控制器：

function ContainerCtrl($scope,$http){

$scope.item = [{}];

$scope.fetchData = function($input){

    $http.post("../sys/core/fetchPacking.php",{
        'val': $input
    }).success(function(data,status){
        $scope.item.push(data.key);
    });

    return $scope.item;

}

$scope.hide = function(){
    return false;
}

}

现在，出现了以下问题：

  • 当我通过向 提供输入来启动脚本时<input>，它会产生一些对我来说看起来像无限循环的东西：返回的数据将一遍又一遍地传递到框中。我该如何防止这种情况，为什么会这样？
  • 脚本返回的不是正确的值，而是null. 我的错在哪里？

ps 问题 #1 还引发了另一个问题：我如何查看我的返回值。直到今天，我都会通过console.log(). 但是，由于这是循环运行的，所以这是行不通的。

4

2 回答 2

1

您需要“观察”testActivator控制器中的更改...

$scope.$watch('testActivator', function (testActivator) {
    $scope.fetchData(testActivator);
});

$scope.fetchData = function (testActivator) {
    $http.post("../sys/core/fetchPacking.php", {'val': testActivator})
        .success(function (data, status) {
            $scope.item.push(data.key);
        });
};

并且testActivator输入需要在ContainerCtrl...的范围内

<div class="Container" ng-show="Activator.length" ng-controller="ContainerCtrl">
    <input type="text" ng-model="testActivator">

    <p ng-repeat="item in items">{{item | json}}</p>
</div>

否则，您可以使用 Angular 的“点规则”来解决父范围和子范围之间的可见性问题：

基本上，只需更改testActivator为foo.testActivator.

于 2013-06-20T08:16:07.400 回答
1

您的代码中有几个问题。

首先，您的 testActivator 需要与 ContainerCtrl 在同一范围内。

我想您想在输入值更改时调用 fetchData 吗？然后你应该使用 ng-change 指令。

在表达式内部调用 fetchData 函数没有意义。fetchData 函数应该发出请求并将结果数据放入范围内的变量中。然后，您可以在表达式内部显示获取的数据：

<div class="Container" ng-controller="ContainerCtrl">
    <input type="text" ng-model="testActivator" ng-change="fetchData(testActivator)">

    <div>
        <p ng-repeat="item in items">{{item}}</p>
    </div>
</div>

你的控制器应该看起来像这样：

function ContainerCtrl($scope,$http) {
    $scope.items = [];
    $scope.fetchData = function(input){
        $http.post("../sys/core/fetchPacking.php",{
            'val': input
        }).success(function(data,status){
            $scope.items.push(data.key);
        });
    }
}

我认为您应该完成 AngularJS 教程： http ://docs.angularjs.org/tutorial/

于 2013-06-20T08:24:25.777 回答