同步角項目（產品）

Question

想象一下，我們有一些產品清單。我們通過PHP獲取它們。例如：

$products = Product::all(); 

然後在我們看來：

<?php foreach ($products as $product): ?> 
    <div class='product'> 
     <div class="name"><?php echo $product->name ?></div> 
     <div class="short-info"><?php echo $product->short ?></div> 

     <div class="quantity"> 
      <button class="add-one">-</button> 
      <input type="text" value="<?php echo $product->quantity ?>"> 
      <button class="remove-one">+</button> 
     </div> 
    </div> 
<?php endforeach ?> 

在角度，我們都會有一些這樣想：

<div class='product' ng-repeat="product in products"> 
    <div class="name">{{ product.name }}</div> 
    <div class="short-info">{{ product.short }}</div> 

    <div class="quantity"> 
     <button class="add-one" ng-click="removeOne(product)">-</button> 
     <input type="text" ng-model="{{ product.quantity }}"> 
     <button class="remove-one" ng-click="addOne(product)">+</button> 
    </div> 
</div> 

但是我們怎麼能讓這些東西一起工作？ 我想用php（對於seo puproses）立即填充products，並具有角度提供的那些功能。

**EXAMPLE:** 
User navigate to http://.../catalog 
User instantly see product list (because they were rendered with php) 
User instantly can change product amount (here comes angular ng-model) 

如何做到這一點？由於

Answer 1

您可以使用

<div class='product' ng-repeat="product in products" ng-init="products=<?php echo json_encode($products);?>"> 
    <div class="name">{{ product.name }}</div> 
    <div class="short-info">{{ product.short }}</div> 

    <div class="quantity"> 
     <button class="add-one" ng-click="removeOne(product)">-</button> 
     <input type="text" ng-model="{{ product.quantity }}"> 
     <button class="remove-one" ng-click="addOne(product)">+</button> 
    </div> 
</div> 

我不是PHP程序員，但你可以在這裏得到的想法。