0

私はAngularJSが初めてで、試してみることにしました。それについて読んだところ、既存の HTML にプラグインするだけで機能することがわかりました。そして今、私はこの時点で立ち往生しています。wordpress と angularjs を使用した短縮された PHP コードは次のとおりです。

<?php
$the_query = new WP_Query(array('post_type' => 'products', 'nopaging' => 'true'));
    <div class="container">
        <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
            <?php $name         = get_field("name"); ?>
            <?php $tree         = get_field("tree"); ?>
            <div class="material" ng-click="productMaterial(product)"
                ng-init="product={name:'<?php echo $name; ?>',tree:'<?php echo $tree; ?>'};">
            </div>
        <?php endwhile; ?>
    </div>

ループが完了した後、HTML ソースによると、すべての ng-inits <div class="material">-s が正しい値を取得します。

<div class="material" ng-click="productMaterial(product)" ng-init="product={name:'Castello',tree:'oak'};"></div>
..
<div class="material" ng-click="productMaterial(product)" ng-init="product={name:'Variostep CL',tree:'oak'};"></div>

私のコントローラー：

calculator.controller('Calc1ProductController', ['$scope', 'calc1Service', function($scope, calc1Service) {

    $scope.productMaterial = function(product) {
        console.log("Clicked product: " + $scope.product.name); // print always Variostep CL
    };
}]);

したがって、問題は、製品をクリックするたびに、常に最後の製品がコンソールに表示されることですVariostep CL。ループ内の新しいサイクルはそれぞれ、前の製品オブジェクトをオーバーライドするだけで、最後の製品のみが保存されることを理解しています。

Webページをクリックするたびに正しい製品データがコンソールに記録されるように、製品データを渡すにはどうすればよいですか?

私が見たように、他のアプローチは純粋なangularjsアプローチを使用することであり、APIリクエストを実行してJSONを受信し、WPループの代わりにng-repeatを使用しますが、さらに多くのコードを書き直す必要があります.

インクリメントカウンターを作成して製品の配列を保存し、角度コントローラーのインデックスでアクセスすることを考えていましたか、それとももっと簡単なアプローチがありますか?

私の質問がごちゃごちゃしている場合は、ウェブページのスナップショットとより明確な説明を提供できます。ありがとうございました

4

1 に答える 1