CODEWITHSUNDEEP
angularjs
Innovation
Innovation

Reputation: 1534

AngurJS Select box empty on select

Please follow the link below.I am creating a select box in Angular JS.

Although select box populated successfully but it gets empty when i select any option. While it should show the selected option value. All the files can be found on the link itself.

http://embed.plnkr.co/kBAyU1/preview

index.html 

<!DOCTYPE html>
<html ng-app="shopping">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Hello World</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="ShoppingCtrl">

 <h1>Oder till Now</h1>
 <table>
 <tr><td>Item Name</td><td>Quantity</td><td>Price</td><td>Total</td><td>Remove</td></tr>
 <tr ng-repeat="item in items">
 <td>{{item.name}}</td>
 <td><input ng-model="item.quantity"></td>
 <td>{{item.price |currency:'Rs'}}</td>
 <td>Total: {{item.price * item.quantity | currency:'Rs'}}</td>
 <td><button ng-click="remove($index)">Remove</button></td>
 </tr>
 </table>

            <select  ng-model="itemsList" ng-options="x.name for x in itemsList">
              <option ng-if="!selectedItem" value="">Select item</option>
            </select>
          <!--   <input   size="10" placeholder="quantity"/>
             <input  ng-model="itemList.price" size="10" placeholder="price"/> -->
            <input class="btn-primary" type="button" value="add" ng-click="addItem()"/>


</body>

</html>

app.js

var app = angular.module('shopping',[]);

app.controller('ShoppingCtrl',function($scope){

    $scope.items=[{
      name:  'Lux Soap',
      quantity: 10,
      price: 120

    },{
      name: 'Panteene Shampoo',
      quantity: 2, 
      price: 230

    },{
      name: 'Maggie',
      quantity: 30,
      price: 10


    }];

    $scope.itemsList =[{
        name:'Shoe Polish',
        price:40
    },{
        name:'Wine bottle',
        price:1000
    },{
        name:'Lucky coin',
        price:30
    },{
        name:'lunch box',
        price:450
    },{
        name:'Tamatoo sauce',
        price:100
    },{
        name:'Lux Soap',
        price:120
    },{
        name:'Panteene Shampoo',
        price:230
    },{
        name:'Maggie',
        price:10
    }];


   $scope.remove = function(index){

     $scope.items.splice(index,1);
   };

    $scope.addItem = function () {

        $scope.items.push({
            name: $scope.name,
            quantity: $scope.quantity,
            price: $scope.price
        });
        $scope.name = '';
        $scope.quantity = '';
        $scope.price = '';
    };

});

Upvotes: 0

Views: 74

Answers (2)

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

Change your addItem code

js

$scope.addItem = function () {

        $scope.items.push({
            name: $scope.selectedItemValue.name,
            quantity: $scope.selectedItemValue.quantity,
            price: $scope.selectedItemValue.price
        });
        $scope.selectedItemValue = '';//by doing this the ading functionality will get reset to previous state
        $scope.selectedItemValue.quantity = '';
        $scope.selectedItemValue.price = '';
    };

and html select code and ng-model name

 <select  ng-model="selectedItemValue" ng-options="x.name for x in itemsList">
              <option ng-if="!selectedItem" value="">Select item</option>
            </select>

Demo from plnkr

Demo Image

enter image description here

Upvotes: 1

Madasu K
Madasu K

Reputation: 1863

Your selected model is wrong. It should be something like 

<select  ng-model="itemsInList" ng-options="x.name for x in itemsList">
<option ng-if="!selectedItem" value="">Select item</option>
</select>

Check the fixed plnkr

Upvotes: 1

Related Questions