Javascript 同步角度项目（产品）

假设我们有一些产品清单。我们通过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" 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程序员，但您可以在这里了解我的想法。

但当您查看页面源代码时，只有angulars模板未呈现产品。如果您使用ng app和使用controller正确安装angular模块，则指令ng init相当于在controller中声明产品列表。所以，在第页将是正确绑定的产品列表。你们可以自己测试，看看它不是。在Cmd+opt+u中，您将看不到渲染的产品，因为它们是通过jsp渲染的。在这种情况下，您可以在服务器上创建角度指令。例如：“{product.name}}”将是“].name}”，或者最简单的方法是初始化产品，如前面的答案宽度ng init和每个产品的js索引相同，然后将绑定{{product.short}更改为{{products[index].short}

**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)

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