我想获得服务,这需要进一步的处理有一些异步数据。在code是在这里 plnkr ,
我模拟与超时一个异步呼叫,并且一旦接收到数据,用户界面被更新。但是,我也需要处理在我的UI服务(doubleData)和以后使用的数据。我说,我需要用一些细节来增加数据。
一直以来,数据为空时, {{doubleData()}}
被调用,它永远不会填充它。我怎样才能实现的方式在我的服务进一步处理数据?(其中填充异步 - 说$ HTTP)
的index.html
<!DOCTYPE HTML>< HTML NG-应用=对myApp> < HEAD> <脚本类型=文/ JavaScript的SRC =../../../角1.0.2 / angular.js>< / SCRIPT> <脚本类型=文/ JavaScript的SRC =的script.js>< / SCRIPT> < /头> <身体GT; < DIV NG控制器=MainCtrl> {{}数据}< BR> {{doubleData()}} < / DIV> < /身体GT;< / HTML>
的script.js
VAR应用= angular.module('对myApp',[]);app.factory('为myService',函数($超时){ VAR数据= [] doubleData = []; 变种为myService = {}; myService.async =功能(){ $超时(函数(){ data.length = 0; 为(变量I = 0; I&小于10;我++){ data.push({VAL:的Math.random()}); } },5000); }; myService.data =函数(){返回数据; }; myService.doubleData =功能(){ doubleData = [] 对于(VAR I = 0; I< data.length;我++){ doubleData.push({VAL:10 *数据[I]}); }; 返回doubleData; }; 返回为myService;});app.controller('MainCtrl',功能(为myService,$范围){ myService.async(); $ scope.data = myService.data(); $ scope.doubleData = myService.doubleData;});
输出(经过5秒):
[{"val":0.4908415926620364},{"val":0.25592787051573396},{"val":0.8326190037187189},{"val":0.6478461190126836},{"val":0.8502937415614724},{"val":0.19280604855157435},{"val":0.06115643493831158},{"val":0.5100495833903551},{"val":0.4134843284264207},{"val":0.5548313041217625}][{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null}]解决方案
它看起来像你的问题是循环在你的一个错字,你需要访问数据[I] .VAL
:
为(VAR I = 0; I< data.length;我++){ doubleData.push({VAL:10 *数据[I] .VAL});};
另一种方式来做到这一点(不看更改变量)将绑定 doubleData 要绑定到
数据以同样的方式
并调用您的异步回调函数来清空和填充 doubleData 与计算值。看到这个 plnkr 一个例子。
I want to get some asynchronous data in service, which needs to further processed there. The code is here at plnkr,
I simulate an async call with timeout, and once the data is received, the UI is updated. But, I also need to process the data in service (doubleData) and later use in my UI. Say, I need to augment the data with some specifics.
Since, data is null when {{doubleData()}}
is called, it never populates it. How can I achieve a way to process data further in my service(which is populated async - say $http)?
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<script type="text/javascript" src="../../../angular-1.0.2/angular.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
{{data}}<br>
{{doubleData()}}
</div>
</body>
</html>
script.js
var app = angular.module('myApp',[]);
app.factory('myService', function($timeout) {
var data = [],
doubleData = [];
var myService = {};
myService.async = function() {
$timeout(function(){
data.length = 0;
for(var i = 0; i < 10; i++){
data.push({val: Math.random()});
}
}, 5000);
};
myService.data = function() { return data; };
myService.doubleData = function() {
doubleData = []
for (var i = 0; i < data.length; i++) {
doubleData.push({val: 10* data[i]});
};
return doubleData;
};
return myService;
});
app.controller('MainCtrl', function( myService,$scope) {
myService.async();
$scope.data = myService.data();
$scope.doubleData = myService.doubleData;
});
Output (after 5 sec):
[{"val":0.4908415926620364},{"val":0.25592787051573396},{"val":0.8326190037187189},{"val":0.6478461190126836},{"val":0.8502937415614724},{"val":0.19280604855157435},{"val":0.06115643493831158},{"val":0.5100495833903551},{"val":0.4134843284264207},{"val":0.5548313041217625}]
[{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null}]
解决方案
It looks like your issue is a typo in your for loop you need to access data[i].val
:
for (var i = 0; i < data.length; i++) {
doubleData.push({val: 10* data[i].val});
};
Another way to do this (without watching for changes to variables) would be to bind doubleData
the same way you are binding to data
and call a function in your async callback to empty and populate doubleData
with the calculated value. See this plnkr for an example.
相关推荐
最新文章