AngularJS，工厂，做POST则GET方法 [英] AngularJS, factory, do POST then GET method

问题描述

我在做与AngularJS REST请求时，有一个小问题。
我曾服务器部分在PHP（Laravel）做的，我邮差测试，它的正常工作。我只是有POST / EX pression哪里我送JSON像 {前pression：（2 + 5）} ，我会得到JSON像 {前pression：（2 + 5），结果：7} ，当我做一些POST请求我需要结果被我的result.html页串联。我写了app.js路由提供，和我有contoller.js

i'm having a little problems when doing REST requests with AngularJS. I have server part done in PHP(Laravel), I tested it with POSTMAN and it's working fine. I just have POST /expression where i send json like {"expression":"(2+5)"} and I would get json like {"expression":"(2+5)","result":"7"}, when I do several POST request I'll need the results to be concatenated on my result.html page. I wrote app.js for route providing, and i have 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工厂

and have factory in 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

and have the html that calls this post request

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

角运行良好，我觉得我没有得到正确的JSON，当我在mozilla-执行此>网络我知道我做了POST请求，我得到JSON输入反应的结果：7，前pression：（2 + 5）。我怎样才能得到这样的结果 - > 7 results.ex pression，results.result？

Angular is running fine, I think i'm not getting json right, when i execute this in mozilla->network i see that i have done POST request and I get json respone result:"7", expression:(2+5). How can i get this result -> 7 in results.expression, results.result?

推荐答案

您$ scope.results对象被定义为具有两个属性，但是当你在NG-重复迭代，你尝试字符串访问属性别T存在的，所以它静静地失败。

Your $scope.results object is defined as having two properties, but when you iterate it in an ng-repeat, you try to access properties of strings that don't exist, so it fails silently.

// 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错误在这里通过打印你的对象：

See error in HTML here by printing your object:

<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方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！