同步角度项目（产品）

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 ?>

在 Angular 中我们会有这样的想法：

<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 填充 products（用于 seo puproses）并具有 angular 提供的功能。

**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程序员，但你可以在这里得到想法。