Передача нескольких переменных php в список объектов объекта

Question

Я новичок в AngularJS и решил попробовать. Поскольку я читал об этом, я могу просто подключиться к существующему HTML, и он будет работать. И теперь я застрял в этой точке. Вот мой укоротить PHP код с WordPress и angularjs:

<?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, все нг-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. Я понимаю, что каждый новый цикл в цикле просто переопределяет предыдущий объект продукта, и сохраняется только последний продукт.

Как можно передавать данные о продукте так, чтобы всякий раз, когда я нажимаю на веб-странице, правильные данные о продукте регистрируются на консоли?

Как я уже говорил, другой подход заключается в использовании подхода с использованием чистого угла, что я выполняю запрос API и получаю JSON, а затем вместо цикла WP использую ng-repeat, но тогда мне потребуется переписать еще больше кода ,

Я думал создать счетчик и хранить массив продуктов, а затем получить доступ по индексу в угловом контроллере или, может быть, есть более простой подход?

Если мой вопрос слишком запутан, я могу принести снимки веб-страницы и более четкое объяснение. Спасибо

Answer 1

Цитируя http://docs.angularjs.org/api/ng.directive:ngInit

Единственное правильное использование ngInit для наложения особых свойств ngRepeat, как показано на рисунке демы. Помимо этого случая, вы должны использовать контроллеры, а не ngInit, чтобы инициализировать значения в области.

Но, поскольку вы используете Angular с PHP, я не уверен, что это предложение все еще стоит.

Я думаю, причина, по которой вы всегда видите последний продукт, состоит в том, что вы постоянно переопределяете один и тот же кусок данных в своем контроллере объявлениями ng-init, закодированными с помощью кода PHP, который у вас есть. Фактически, ваш контроллер фактически определил $scope.product посредством использования ng-init, если я не ошибаюсь. Таким образом, все ваши вызовы ng-click будут использовать общие аргументы $scope.product.

В качестве предложения, если вы можете сразу получить все ваши данные о товаре (то есть в виде массива), вы должны сделать это вместо этого, сохраните данные в своем контроллере, а затем используйте ng-repeat, чтобы иметь угловой создайте HTML для каждой части данных продукта.