0

基本的に、私がやろうとしているのは、スライドショーを作成することです。私がこれに Angular を使用している理由は、テンプレート化から利点を得て、できれば一度に 1 つのテンプレートだけをページにロードするためです。

コントローラーが取得する JSON ファイルにデータがあります。

JSON:

{
    "prop_title"    : "Hyde Lane, Hyde",
    "prop_postcode" : "SP2 7AP",
    "prop_price"    : "",
    "prop_image"    : "",
    "prop_desc"     : "",
    "template"      : "views/prop-thumbs.html",
    "info_image"    : "",
    "duration"      : "4000"

},

コントローラ：

function AppCtrl($scope, $http) {

    //GET THE JSON FILE
    $http.get('json/pages.json').success(function (data) {

        //ASSIGN THE PAGES TO THE SCOPE
        $scope.pages = data;

        //LOOP THROUGH THE DATA AND ASSIGN THE VIEW
        for (var i = $scope.pages.length - 1; i >= 0; i--) {

        };

    });
}

私の JSON ファイルからわかるように、各要素には、使用するビュー ファイルと、画面にとどまる必要がある期間が含まれています。また、コントローラーでわかるように、タイマーにビューを割り当てるコードを含めることが期待される for ループの作成を開始しました。これは可能ですか？これを行う最も簡単で最良の方法は何ですか？

どんな助けも真剣に感謝します、私は今すべてをかなり試しました!

4

2 に答える 2

1

Mark Rajcokがコメントで指摘したように、おそらく $timeout を使用する必要があります
。

html 部分は非常に単純whatToIncludeです。変数に含まれるものを含めるように angular に指示するだけです。

<div ng-include='whatToInclude'></div>

コントローラー側では、テンプレートとカウンターを使用してデータを初期化し、nextSlide 関数を定義します。この関数は、パラメーターで渡されたタイムアウトで次のテンプレートを呼び出します。この関数を呼び出して、イニシャル パラメーター (0 のタイムアウト、データの最初の要素) でループを開始します。

$scope.whatToInclude='tpl1.html';
$scope.count=0;
$scope.nextSlide=function(timeOut){
    $timeout(function(){
        $scope.whatToInclude=$scope.data[$scope.count].template
        $scope.count+=1
        if($scope.count>=$scope.data.length)
            $scope.count=0
        $scope.nextSlide($scope.data[$scope.count].duration)
    },timeOut);
};

$scope.nextSlide(0)

これは、スライドショーの良いスタートになると思います ;)

楽しむ

于 2013-08-12T15:44:39.107 に答える