- 首页
- 前端开发
- AngularJS，工厂，做 POST 然后 GET 方法
AngularJS，工厂，做 POST 然后 GET 方法
[英] AngularJS, factory, do POST then GET method
本文介绍了AngularJS，工厂，做 POST 然后 GET 方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在使用 AngularJS 执行 REST 请求时遇到了一些问题.我在 PHP(Laravel)中完成了服务器部分，我用 POSTMAN 对其进行了测试，并且工作正常.我只有 POST/expression 我发送 json 像 {"expression":"(2+5)"} 并且我会得到像 {"expression":"(2+5)","result":"7"}，当我执行多个 POST 请求时，我需要将结果连接到我的 result.html 页面上.我写了 app.js 来提供路由，我有 contoller.js
//后表达myApp.controller('expressionController', ['$scope', 'postExpressionFactory', 'getExpressionFactory','$location',函数($scope，postExpressionFactory，getExpressionFactory，$location){$scope.postNewExpression = 函数 () {$scope.results = postExpressionFactory.evaluate({'expression':$scope.expression});console.log($scope.results.expression);console.log($scope.results.result);};}]);
并且在 services.js 中有工厂
//后工厂myServices.factory('postExpressionFactory', ['$resource',功能($资源){return $resource('../server.php/expression', {}, {评估:{方法:'POST'，标题:{'Content-Type':'application/json'}，isArray:false}});}]);
并拥有调用此发布请求的 html
<h2>结果</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>
</表单>
Angular 运行良好，我想我没有得到正确的 json，当我在 mozilla->network 中执行这个时，我看到我已经完成了 POST 请求，我得到了 json 响应结果:7"，表达式:(2+5).我怎样才能在results.expression、results.result中得到这个结果-> 7?
解决方案
您的 $scope.results 对象被定义为具有两个属性，但是当您在 ng-repeat 中迭代它时，您尝试访问不'不存在，所以它默默地失败.
//你的结果对象:$scope.results = postExpressionFactory.evaluate({'expression':$scope.expression});//所以你的对象看起来像这样:{表达:某事，结果:别的东西，}
您尝试访问它的方式:
<a class="list-group-item"><h4 class="list-group-item-heading">{{res.expression}}</h4><h4 class="list-group-item-heading">{{res.result}}</h4></a>
通过打印您的对象在此处查看 HTML 中的错误:
{{ 结果 }}<a class="list-group-item"><h4 class="list-group-item-heading">{{res.expression}}</h4><h4 class="list-group-item-heading">{{res.result}}</h4></a>
//你可能想要的是一个结果数组，然后推送到数组上$scope.results = [];//推$scope.results.push(postExpressionFactory.evaluate({'expression':$scope.expression}));
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);
};
}]);
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}
});
}]);
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>
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?
解决方案
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,
}
The way you attempt to access it:
<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>
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屋！
