Question

我有一个角度控制器，用于显示一些数据。现在我可以从我的php文件绑定数组，但控制器似乎没有更新。 console.log显示数组已绑定，但我的html没有结果。

HTML：

<div class="motivatie-edit front-end-edit" ng-app="MotivatieApp">
    <div ng-controller="ResultaatController as results">
        <div id="motivatie_resultaat" class="resultaat" ng-repeat="r in results.motivaties">
            {{r.motivatie}}
        </div>
    </div>
</div>

应用程式：

var app = angular.module('MotivatieApp', []);

    (function () {
    app.controller('ResultaatController', function ($http) {
        $http.post('ajax_crud.php', {motivatie: 'get'}).
                success(function (json, status, headers, config) {
                    app.motivaties = json;
                    console.log(app);
                }).
                error(function (data, status, headers, config) {
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                });
    });
})();

PHP：

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);

/* get motivatie */
if ($request->motivatie == 'get') {
    $motivatieArray = array();
    $customer1 = array(
        'motivatie' => 'John Doe',
    );
    $motivatieArray[] = $customer1;
    $customer2 = array(
        'motivatie' => 'Jane Doe',
    );
    $motivatieArray[] = $customer2;

    echo json_encode($motivatieArray);
}

Answer 1

你正在使用jquery ajax，所以这就是棱角分明的知识，如果你在角度方面做了一些事情，那么你必须告诉你有更新的更新，

使用$scope.$apply()

jQuery.post("ajax_crud.php", data, function (json) {
        app.motivaties = json;
        $scope.$apply();
    }, "json");

或 要做的最好的事情是使用有角度的$http服务。

由于你使用angular，所以不需要在控制器中使用jquery ajax。

Answer 2

看看是否有效，

app.controller('ResultaatController', function ($http) {
    var vm = this;
    $http.post('ajax_crud.php', {motivatie: 'get'}).
            success(function (json, status, headers, config) {
               vm.motivaties = json;
                console.log(vm);
            }).
            error(function (data, status, headers, config) {
                // called asynchronously if an error occurs
                // or server returns response with an error status.
            });
});

DEMO plunk，http://plnkr.co/edit/5MVA24ydgeH2zhHYpTLT?p=preview

Answer 3

你完全误解了角度数据绑定的工作原理。 angular中的数据绑定是通过$ scope实现的，请参阅此official guide about scope。

angular use $compile service将范围变量插入到html模板中。

所以在你的情况下，你需要做两件事

从php文件中获取数据并分配给$ scope variable

var app = angular.module（＆＃39; MotivatieApp＆＃39;，[]）;

app.controller('ResultaatController',['$scope','$http' function ($scope,$http) {
  $http.post('ajax_crud.php', {motivatie: 'get'}).
            success(function (json, status, headers, config) {
                $scope.motivaties = json; // assign ajax result to $scope here
            })
});
}]);

在html中使用motivaties

＆＃13;

<div class="motivatie-edit front-end-edit" ng-app="MotivatieApp">
    <div ng-controller="ResultaatController">
        <div id="motivatie_resultaat" class="resultaat" ng-repeat="r in motivaties">
            {{r}}
        </div>
    </div>
</div>

＆＃13;

绑定数组后角度控制器不会更新

3 个答案: