1

I am new to AngularJS and I have a problem with a simple invoice system that I trying to create. The problem is that the input field, which shows the cost of a product (ng-model:item.cost), does not get filled with a value depending on a choice I make in a select box.

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

The 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;
        }

});
Dau
  • 8,578
  • 4
  • 23
  • 48
Sander Nelen
  • 25
  • 1
  • 5

3 Answers3

0

The ng-model of the selection-box has to be the same as the ng-model of the input field.

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

This should work

Mayobirne
  • 51
  • 5
0

You are trying to set the value of the text box which will not work because of ng-model: value="{{selectedItem.price}}" and it would appear that item.cost doesn't contain any value.

For this to work you could use ng-change on your select element to set item.cost = selectedItem.price like so:

    <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>
keithm
  • 938
  • 6
  • 9
  • Extra question: I want to add a type argument to my products and using them to fill an extra select box. This is working, but I want to select only the distinct values. This is not working: I tried just 'type' and 'item.type' to set the unique attribute but no success, no values are loaded. Any idea? Thanks! – Sander Nelen Aug 26 '15 at 11:15
  • it would be just 'type' and not 'product.type' .. also, ensure you have included angular-ui in your app as the unique filter is part of angular-ui http://stackoverflow.com/questions/15914658/angular-js-how-to-make-ng-repeat-filter-out-duplicate-results – keithm Aug 26 '15 at 11:30
  • Thanks keith! I installed angular ui using bower (bower install --save angular-ui-utils) but it does not seem to work. Do I have to reference to a file in the code? – Sander Nelen Aug 26 '15 at 11:58
-1

I didn't see {{item.cost}} in your code, which should be declared somewhere...

vincent T
  • 47
  • 2
  • 3
  • 9
  • the `.` isn't a problem, it's juste the attribute cost of the object item. Morever you don't need to declare your `ng-model` to use it. The problem here come from the `value="{{selectedItem.price}}"` which doesn't evalute the value – Pierre-Alexandre Moller Aug 26 '15 at 09:11