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

Question

我在使用 AngularJS 执行 REST 请求时遇到了一些小问题。我在 PHP(Laravel) 中完成了服务器部分，我用 POSTMAN 测试了它，它工作正常。我只有 POST /expression 我发送 json 就像 {"expression":"(2+5)"} 我会得到 json 就像 {"expression":"(2+5)","result":"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)。我怎样才能得到这个结果 -> 7 in results.expression, results.result？

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

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

AngularJS, factory, do POST then GET method

javascript

json

angularjs

angularjs-scope