Question

所以我试图将我的应用程序从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而不是正确的值。我的错在哪里？

P.S。问题＃1引发了另一个问题：我如何看待我的返回值。直到今天，我都会通过console.log()将其解析到控制台。但是，由于这是在一个循环中运行，这将无法工作。

Answer 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。

Answer 2

您的代码中存在多个问题。

首先，您的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/

包括通过angularjs在DOM元素中获取的数据

2 个答案: