javascript - AngularJS，工厂，执行 POST 然后 GET 方法

Question

我在使用 AngularJS 执行 REST 请求时遇到了一些问题。我用 PHP(Laravel) 完成了服务器部分，我用 POSTMAN 测试了它，它工作正常。我只是有 POST/表达式，我发送像 {"expression":"(2+5)"} 这样的 json，我会得到像 {"expression":"(2+5) 这样的 json )","re​​sult":"7"}，当我执行多个 POST 请求时，我需要将结果连接到我的 result.html 页面上。我写了app.js来提供路由，并且我有contoller.js

//post expression
myApp.controller('expressionController', ['$scope', 'postExpressionFactory', 'getExpressionFactory','$location',
    function ($scope, postExpressionFactory,getExpressionFactory, $location) {
        $scope.postNewExpression = function () {
            $scope.results = postExpressionFactory.evaluate({'expression':$scope.expression});
            console.log($scope.results.expression);
            console.log($scope.results.result);
        };
    }]);

并在 services.js 中有工厂

//post factory
myServices.factory('postExpressionFactory', ['$resource',
    function ($resource) {
        return $resource('../server.php/expression', {}, {
            evaluate: {method: 'POST', headers: {'Content-Type': 'application/json'}, isArray: false}
        });
    }]);

并拥有调用此 post 请求的 html

<form>
    <div class="row">
        <div class="col-lg-12">
            <div class="form-group">
                <label class="control-label">Enter expression</label>
                <div class="input-group">
                    <span class="input-group-addon">=</span>
                    <input class="form-control" type="text" id="expression" name="result" ng-model="expression" ng-required="true">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="postNewExpression()">Calculate</button>
                    </span>
                </div>
                <h2>Results</h2>
                <div class="list-group" ng-repeat="res in results">
                    <a class="list-group-item">
                        <h4 class="list-group-item-heading">{{res.expression}}</h4>
                        <h4 class="list-group-item-heading">{{res.result}}</h4>
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>

Angular 运行良好，我认为我没有正确获取 json，当我在 mozilla->network 中执行此操作时，我看到我已经完成了 POST 请求，并且得到了 json 响应结果:“7”，表达式:(2 +5)。我怎样才能在 results.expression、results.result 中得到这个结果 -> 7？

Answer 1

您的 $scope.results 对象被定义为具有两个属性，但是当您在 ng-repeat 中迭代它时，您尝试访问不存在的字符串的属性，因此它会默默地失败。

// your results object:
$scope.results = postExpressionFactory.evaluate({'expression':$scope.expression});

// so your object looks like this:
{
    expression: something,
    result: somethingElse,
}

您尝试访问它的方式:

<div class="list-group" ng-repeat="res in results">
     <a class="list-group-item">
         <h4 class="list-group-item-heading">{{res.expression}}</h4>
         <h4 class="list-group-item-heading">{{res.result}}</h4>
     </a>
</div>

通过打印您的对象来查看 HTML 中的错误:

<div class="list-group" ng-repeat="res in results">
     {{ result }}
     <a class="list-group-item">
         <h4 class="list-group-item-heading">{{res.expression}}</h4>
         <h4 class="list-group-item-heading">{{res.result}}</h4>
     </a>
</div>

// what you probably want is an array for the results, then push onto the array
$scope.results = [];

// push
$scope.results.push(postExpressionFactory.evaluate({'expression':$scope.expression}));