Угловой Javascript внутри php foreach внутри HTML

Question

Я пытаюсь сделать простой торговый сайт, используя главным образом PHP и HTML. Внутри PHP, я создал объекты из class, и эти объекты находятся в array. Теперь внутри HTML, я печатаю каждый object's photo and name с использованием PHP'sforeach. Поскольку это торговый сайт, я добавил FORM под каждой фотографией товара, где клиент может ввести количество предметов, которые они хотят приобрести. Значение по умолчанию равно 0. Теперь, используя ngularJS, я хочу сделать следующее: 1) когда значение (количество нужных элементов) равно 0, ничего не происходит, и веб-страница ничего не печатает. 2) когда значение больше 0, напечатайте номер * цену рядом с form, чтобы пользователь мог видеть в реальном времени, сколько всего будет для этого конкретного элемента.

Вот мой код ..

<?php 
class Stock{ 
    public $name; //in real program it is private. 
    public $price; 
} 

//Create objects and initialize them by giving each of them name and price 
//Assume there are 3 objects 
$items = array($object1, $object2, $object3); 
?> 

//now in HTML code 
<form method="POST" action="order.php"> 
    <?php foreach($items as $item): ?> 
     <!--Print name and price of each --> 
    <input type="text" value="0" name="<?php echo $item->name; ?>"> {{ <!--*****--> }} 
<?php endforeach ?> 

Я хочу напечатать произведение числа * цена товара прямо рядом с формой, только если значение больше 0. Я пытался добавить ng-model="quantity" внутри тег ввода и написал {{ quantity * $_POST[$item->name] }}. Однако это не полностью работает. Это печатает продукт, но потому, что он находится внутри foreach, когда я изменяю значение в form для элемента, вместе с ним меняются значения для формы других элементов. Как вы можете применить angularJS только для определенного элемента?

Answer 1

Ваш цикл должен быть угловым, чтобы сделать это.

Таким образом, вы могли бы связать его как модель ..

form.php

<div ng-app="appModule"> 
<form action="order.php" method="post" ng-controller="orderFormController"> 
    <div ng-repeat="item in itemList"> 
     {{ item.name }} (price - {{ item.price }}): <input type="text" value="0" name="{{item.name}}" ng-model="qty[item.name]" /> 
     Total: <span ng-if="qty[item.name] > 0">{{ item.price*qty[item.name] }}</span> 
    </div> 
</form> 
</div> 

MODULE.JS

var app = angular.module("appModule", []); 
app.controller("orderFormController", function($scope) { 
    // $scope.itemList - ajax your item list here 
    $scope.itemList = [ 
     {name: 'Pencil', 'price': 10}, 
     {name: 'Paper', 'price': 2}, 
     {name: 'Folder', 'price': 13}, 
    ]; 
}); 

Answer 2

Измените значение во входном теге. Обратитесь к атрибуту ввода HTML в W3 Schools.

<input value='<?php // your php code ?>' /> 

input value w3c schools

input value w3c schools example