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

因此，我正在尝试将我的应用程序从jQuery转换为angularjs

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

我的PHP脚本返回一个JSON

我设置了我的

和

字段：

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

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

现在，出现了以下问题：

• 当我通过向
  提供输入来启动脚本时，它将产生一些对我来说像是无限循环的东西：返回的数据将在框中一次又一次地传递。我如何预防这种情况，为什么
• 脚本返回的不是正确的值，而是

  null

  。我的错在哪里

p、 美国问题1还提出了另一个问题：如何查看返回的值。直到今天，我都会通过

console.log（）

将其解析到控制台。但是，由于这是在循环中运行的，所以不会起作用。

您需要“监视”

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);
        });
};

而

测试激活器

输入需要在

容器TRL

的范围内

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

{{item | json}

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

---

基本上，只需将

testActivator

更改为类似于

foo的内容。testActivator

您的代码中有几个问题

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

我认为您应该学习AngularJS教程：

<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);
        });
    }
}