Скрытый ввод и привязка к AngularJS ng-model

Я хочу использовать AngularJS для вычисления общей цены продукта, когда я добавляю количество. У меня есть код, как показано ниже:

<div ng-app="TheApp">
<div ng-controller="TheController">
    <input type="hidden" name="Price" value="100" ng-model="Price" />
    <input type="text" name="Quantity" ng-model="Quantity" />
    Total Price:{{TotalPrice}}
    <button class="btn btn-primary btn-block" ng-click="click()">Add Items</button>
</div>

Внутри моего контроллера у меня есть:

    $scope.TotalPrice = $scope.Price * $scope.Quantity;

Я знаю, что Angular не поддерживает скрытые, но я ищу наилучшую практику для решения проблемы. Пожалуйста, подумайте, что кнопка не для вычисления TotalPrice, а для отправки окончательного результата. Я хочу, чтобы он обновлялся в реальном времени.

Ответы

Ответ 1

В вашем случае, поскольку вы просто хотите использовать

<input type="hidden" name="Price" ng-init="Price=100;" ng-value="Price"/>

Демо: Fiddle

Ответ 2

Angular просто игнорирует скрытые элементы ввода. (ng-model не поддерживает поле ввода)

Если вы хотите, чтобы это значение в ng-model было само, оно не должно быть скрытого типа. Вы можете решить эту проблему, спрятав этот div, выполнив display:none вместо того, чтобы указывать тип скрытым или использовать директиву ng-show, сделать его скрытым.

<div ng-controller="TheController">
    <input type="text" ng-show="false" name="Price" value="100" ng-model="Price" />
    <input type="text" name="Quantity" ng-model="Quantity" />
    Total Price:{{TotalPrice}}
    <button class="btn btn-primary btn-block" ng-click="click()">Add Items</button>
</div>

Ответ 3

Я думаю, что нет необходимости использовать скрытое значение в HTML, так как оно не изменено пользователем, вы можете просто инициализировать это значение в области контроллера и обновить значение "TotalPrice", когда пользователь добавит какое-либо количество, или вы можете также используйте ng-init в html для его инициализации, но не рекомендуется использовать ng-init, как указано в документах.

https://docs.angularjs.org/api/ng/directive/ngInit

Ответ 4

если вы хотите сделать это без кликов

<input type="hidden" name="Price" value="100" ng-model="Price" ng-change="updateTotalPrice()" />
<input type="text" name="Quantity" ng-model="Quantity" ng-change="updateTotalPrice()" />

или если вы хотите сделать это нажатием

<button class="btn btn-primary btn-block" ng-click="addItem()">Add Items</button>

а затем в addItem

function addItem(){
   //increment quantity 
   //call to updateTotalPrice()
}

Ответ 5

Вы можете передать значение Price внутри функции click в качестве аргумента, например:

<div ng-app="TheApp">
<div ng-controller="TheController">

  <input type="text" name="Quantity" ng-model="Quantity" />
  Total Price:{{TotalPrice}}
  <button class="btn btn-primary btn-block" ng-click="click(100)">Add Items</button>
</div>

Или, если у вас есть ваша информация о Product, загружаемая в переменную $scope, вы просто вызываете ее непосредственно из контроллера и не выполняете передачу Price как скрытую или в функции щелчка

$scope.Product  =  productFactory.get();

$scope.click = function() {
 $scope.TotalPrice = $scope.Product.Price * $scope.Quantity;
}

Ответ 6

$scope.price = 10;

Используйте двойные скобки для захвата значения области.

<input type="hidden" name="Price" value="{{price}}"/>