Поле ввода углового ввода, не отображающее значение ng-модели

Question

Я новичок в AngularJS, и у меня есть проблема с простой системой счетов, которую я пытаюсь создать. Проблема заключается в том, что поле ввода, которое показывает стоимость продукта (ng-model: item.cost), не заполняется значением в зависимости от выбора, который я делаю в поле выбора.

HTML-:

<div ng-controller="CartForm"> 
    <table class="table"> 
     <tr> 

      <th>Description</th> 
      <th>Qty</th> 
      <th>Cost</th> 
      <th>Total</th> 
      <th></th> 
     </tr> 
     <tr ng-repeat="item in invoice.items" ng-controller="ProductController as productCtrl"> 
      <td><select ng-model="selectedItem" ng-options="product.name for product in productCtrl.products"> 
      </select></td> 
      <td><input type="number" ng-model="item.qty" ng-required class="input-mini"></td> 
      <td><input ng-model="item.cost" value="{{selectedItem.price}}"></td> 
      <td>€{{item.qty * selectedItem.price}}</td> 
      <td> 
       [<a href ng-click="removeItem($index)">X</a>] 
      </td> 
     </tr> 
     <tr> 
      <td><a href ng-click="addItem()" class="btn btn-small">add item</a></td> 
      <td></td> 
      <td>Total:</td> 
      <td>€{{total()}}</td> 
     </tr> 
    </table> 
</div> 

В app.js:

app.controller('CartForm',function($scope) { 
    $scope.invoice = { 
     items: [] 
    }; 

    $scope.addItem = function() { 
     $scope.invoice.items.push({ 
      qty: 1, 
      description: '', 
      cost: 0 
     }); 
    }, 

     $scope.removeItem = function(index) { 
      $scope.invoice.items.splice(index, 1); 
     }, 

     $scope.total = function() { 
      var total = 0; 
      angular.forEach($scope.invoice.items, function(item) { 
       total += item.qty * item.cost; 
      }) 


      return total; 
     } 

}); 

Answer 1

Вы пытаетесь установить value текстового поля, которое не будет работать из-за ng-model: value="{{selectedItem.price}}" и казалось бы, что item.cost не содержит никакого значения.

Для этой работы можно использовать ng-change на вашем select элемент установить item.cost = selectedItem.price как так:

<tr ng-repeat="item in invoice.items" ng-controller="ProductController as productCtrl"> 
     <td><select ng-model="selectedItem" 
        ng-change="item.cost = selectedItem.price" 
        ng-options="product.name for product in productCtrl.products"> 
     </select></td> 
     <td><input type="number" ng-model="item.qty" ng-required class="input-mini"></td> 
     <td><input ng-model="item.cost" /></td> 
     <td>€{{item.qty * selectedItem.price}}</td> 
     <td> 
      [<a href ng-click="removeItem($index)">X</a>] 
     </td> 
    </tr> 

Answer 2

Я не видел {{item.cost}} в коде, который должен быть объявлен где-то ...

Answer 3

ng-модель окна выбора должна быть такой же, как и ng-модель поля ввода.

<td><input ng-model="selectedItem.cost"></td> 

Это должно работать