コードをjavascriptからangularjsに変換

Question

以下のコードはJavaScriptで書かれていますが、私はjavascriptで気になっていました。今はangularjsを使ってこのコードをangularjsに変換できますか？

var pic1=new Image() 
pic1.src="http://api.arabiaweather.com/localsat/gulf_ksa1//61.jpg" 
var pic2=new Image() 
pic2.src="http://api.arabiaweather.com/localsat/gulf_ksa1//60.jpg" 
var pic3=new Image() 
pic3.src="http://api.arabiaweather.com/localsat/gulf_ksa1//59.jpg" 
var pic4=new Image() 
pic4.src="http://api.arabiaweather.com/localsat/gulf_ksa1//58.jpg" 
var pic5=new Image() 
pic5.src="http://api.arabiaweather.com/localsat/gulf_ksa1//57.jpg" 
var pic6=new Image() 
pic6.src="http://api.arabiaweather.com/localsat/gulf_ksa1//56.jpg" 
var pic7=new Image() 
pic7.src="http://api.arabiaweather.com/localsat/gulf_ksa1//55.jpg" 
var pic8=new Image() 
pic8.src="http://api.arabiaweather.com/localsat/gulf_ksa1//54.jpg" 
var pic9=new Image() 
pic9.src="http://api.arabiaweather.com/localsat/gulf_ksa1//53.jpg" 
var pic10=new Image() 
pic10.src="http://api.arabiaweather.com/localsat/gulf_ksa1//52.jpg" 
var pic11=new Image() 
pic11.src="http://api.arabiaweather.com/localsat/gulf_ksa1//51.jpg" 
var pic12=new Image() 
pic12.src="http://api.arabiaweather.com/localsat/gulf_ksa1//50.jpg" 
var pic13=new Image() 
pic13.src="http://api.arabiaweather.com/localsat/gulf_ksa1//49.jpg" 
var pic14=new Image() 
pic14.src="http://api.arabiaweather.com/localsat/gulf_ksa1//48.jpg" 
var pic15=new Image() 
pic15.src="http://api.arabiaweather.com/localsat/gulf_ksa1//47.jpg" 
var pic16=new Image() 
pic16.src="http://api.arabiaweather.com/localsat/gulf_ksa1//46.jpg" 
var pic17=new Image() 
pic17.src="http://api.arabiaweather.com/localsat/gulf_ksa1//45.jpg" 
var pic18=new Image() 
pic18.src="http://api.arabiaweather.com/localsat/gulf_ksa1//44.jpg" 
var pic19=new Image() 
pic19.src="http://api.arabiaweather.com/localsat/gulf_ksa1//43.jpg" 
var pic20=new Image() 
pic20.src="http://api.arabiaweather.com/localsat/gulf_ksa1//42.jpg" 
var pic21=new Image() 
pic21.src="http://api.arabiaweather.com/localsat/gulf_ksa1//41.jpg" 
var pic22=new Image() 
pic22.src="http://api.arabiaweather.com/localsat/gulf_ksa1//40.jpg" 
var pic23=new Image() 
pic23.src="http://api.arabiaweather.com/localsat/gulf_ksa1//39.jpg" 
var pic24=new Image() 
pic24.src="http://api.arabiaweather.com/localsat/gulf_ksa1//38.jpg" 
var pic25=new Image() 
pic25.src="http://api.arabiaweather.com/localsat/gulf_ksa1//37.jpg" 
var pic26=new Image() 
pic26.src="http://api.arabiaweather.com/localsat/gulf_ksa1//36.jpg" 
var pic27=new Image() 
pic27.src="http://api.arabiaweather.com/localsat/gulf_ksa1//36.jpg" 
var pic28=new Image() 
pic28.src="http://api.arabiaweather.com/localsat/gulf_ksa1//35.jpg" 
var pic29=new Image() 
pic29.src="http://api.arabiaweather.com/localsat/gulf_ksa1//34.jpg" 
var pic30=new Image() 
pic30.src="http://api.arabiaweather.com/localsat/gulf_ksa1//33.jpg" 
var pic31=new Image() 
pic31.src="http://api.arabiaweather.com/localsat/gulf_ksa1//32.jpg" 
var pic32=new Image() 
pic32.src="http://api.arabiaweather.com/localsat/gulf_ksa1//31.jpg" 
var pic33=new Image() 
pic33.src="http://api.arabiaweather.com/localsat/gulf_ksa1//30.jpg" 
var pic34=new Image() 
pic34.src="http://api.arabiaweather.com/localsat/gulf_ksa1//29.jpg" 
var pic35=new Image() 
pic35.src="http://api.arabiaweather.com/localsat/gulf_ksa1//28.jpg" 
var pic36=new Image() 
pic36.src="http://api.arabiaweather.com/localsat/gulf_ksa1//27.jpg" 
var pic37=new Image() 
pic37.src="http://api.arabiaweather.com/localsat/gulf_ksa1//26.jpg" 
var pic38=new Image() 
pic38.src="http://api.arabiaweather.com/localsat/gulf_ksa1//25.jpg" 
var pic39=new Image() 
pic39.src="http://api.arabiaweather.com/localsat/gulf_ksa1//24.jpg" 
var pic40=new Image() 
pic40.src="http://api.arabiaweather.com/localsat/gulf_ksa1//23.jpg" 
var pic41=new Image() 
pic41.src="http://api.arabiaweather.com/localsat/gulf_ksa1//22.jpg" 
var pic42=new Image() 
pic42.src="http://api.arabiaweather.com/localsat/gulf_ksa1//21.jpg" 
var pic43=new Image() 
pic43.src="http://api.arabiaweather.com/localsat/gulf_ksa1//20.jpg" 
var pic44=new Image() 
pic44.src="http://api.arabiaweather.com/localsat/gulf_ksa1//19.jpg" 
var pic45=new Image() 
pic45.src="http://api.arabiaweather.com/localsat/gulf_ksa1//18.jpg" 
var pic46=new Image() 
pic46.src="http://api.arabiaweather.com/localsat/gulf_ksa1//17.jpg" 
var pic47=new Image() 
pic47.src="http://api.arabiaweather.com/localsat/gulf_ksa1//16.jpg" 
var pic48=new Image() 
pic48.src="http://api.arabiaweather.com/localsat/gulf_ksa1//15.jpg" 
var pic49=new Image() 
pic49.src="http://api.arabiaweather.com/localsat/gulf_ksa1//14.jpg" 
var pic50=new Image() 
pic50.src="http://api.arabiaweather.com/localsat/gulf_ksa1//13.jpg" 
var pic51=new Image() 
pic51.src="http://api.arabiaweather.com/localsat/gulf_ksa1//12.jpg" 
var pic52=new Image() 
pic52.src="http://api.arabiaweather.com/localsat/gulf_ksa1//11.jpg" 
var pic53=new Image() 
pic53.src="http://api.arabiaweather.com/localsat/gulf_ksa1//10.jpg" 
var pic54=new Image() 
pic54.src="http://api.arabiaweather.com/localsat/gulf_ksa1//9.jpg" 
var pic55=new Image() 
pic55.src="http://api.arabiaweather.com/localsat/gulf_ksa1//8.jpg" 
var pic56=new Image() 
pic56.src="http://api.arabiaweather.com/localsat/gulf_ksa1//7.jpg" 
var pic57=new Image() 
pic57.src="http://api.arabiaweather.com/localsat/gulf_ksa1//6.jpg" 
var pic58=new Image() 
pic58.src="http://api.arabiaweather.com/localsat/gulf_ksa1//5.jpg" 
var pic59=new Image() 
pic59.src="http://api.arabiaweather.com/localsat/gulf_ksa1//4.jpg" 
var pic60=new Image() 
pic60.src="http://api.arabiaweather.com/localsat/gulf_ksa1//3.jpg" 
var pic61=new Image() 
pic61.src="http://api.arabiaweather.com/localsat/gulf_ksa1//2.jpg" 
var pic62=new Image() 
pic62.src="http://api.arabiaweather.com/localsat/gulf_ksa1//1.jpg" 

var counter=1 
function animate(){ 
//does not animate if the browser does not support images 
if (!document.images) 
return 
document.images.animation.src=eval("pic"+counter+".src") 
if (counter<61) 
counter++ 
else 
counter=1 
//controls the speed of the transition, in this case 100 means 100 milliseconds or 1/10 seconds 
setTimeout("animate()",100) 
} 
animate() 

HTML

<img src="http://api.arabiaweather.com/localsat/gulf_ksa1//1.jpg" name="animation" style="width:auto;" class="img-responsive"> 

は、誰もがそれを行う方法を、教えてもらえますか？

Answer 1

画像を使ってビューを処理する角度コントローラを作成します。その後、$interval関数を使用して、このイメージソースを定義済みの時間に更新することができます。 $interval関数の3番目のパラメータは、最大反復量を可能にするので、無限に繰り返すことを心配する必要はありません。

はJavaScript：

angular.module('yourAppName') 
    .controller('PageController',function($interval,$scope) { 
    TIMING = 100 // ms of animation sequence 
    TOTAL = 60 // total number of images 
    $scope.currentIndex = 1; 
    $interval(function() { $scope.currentIndex++ }, TIMING, TOTAL); 
    }); 

HTML：

<img ng-src="http://api.arabiaweather.com/localsat/gulf_ksa1/{{currentIndex}}.jpg" name="animation" style="width:auto;" class="img-responsive"> 

UPDATE：ここ

は、このソリューションが動作することを示すCodePenです。 JSパネルのAngularJSの基本的な書式を調べることで、アプリケーションを作成してHTMLにブートストラップする方法を知ることができます。

また、60秒間の画像（60 * 100ms = 6000ms = 6秒）では、最初に指定したタイミング（100ms）が6秒で速すぎる可能性があります。 60枚の画像すべてを読み込んで表示する。

http://codepen.io/frankrue/pen/XjzXGj

うまくいけば、このことができます。私の下降票を修正します。 :)