Angular JS: Show the Input value as Selected in Dropdown

Question

I am newbie to Angular JS. I did find for the solution, but didn't resolved it.
As per selected value in dropdown, value should be displayed in corresponding Input box.

For Eg: If Basic is selected, corresponding value i.e 299 should be displayed in ng-model item.rate If Advanced is selected, Corresponding value i.e. 499 should be displayed in ng-model item.rate.

HTML:

<tbody>
 <tr ng-repeat="item in invoice.items ">
 <td><select  ng-model="item.names" ng-options="c.name for c in invoice.items track by c.id"></select></td>
<td><input type="text" ng-model="item.rate"/></td>
</tr>
 </tr>
  </tbody>

Angular JS:

$scope.invoice = {
            items: [{id:1,name:'Basic',rate:299},
                    {id:2,name:'Advanced',rate:499}
               ]};

My Code is not working.I am unable to find out the Problem.Please help me.Thanks in advance.

Answer 1

you can use ngOptions full syntax value as text for item in items to bind the options with item.rate, see documentation.

ng-options="c.rate as c.name for c in invoice.items track"

Also I recommend you to avoid binding item.name to select and binding an extra filed to avoid conflicts.

refer below example.

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.selectedItem = '';
    $scope.invoice = {
      items: [{
          id: 1,
          name: 'Basic',
          rate: 299
        },
        {
          id: 2,
          name: 'Advanced',
          rate: 499
        }
      ]
    };
    $scope.show = function(item) {
      return item.name + '(' + item.rate + ')';
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <select ng-model="selectedItem" ng-options="c.rate as c.name for c in invoice.items"></select></td>
  <td><input type="text" ng-model="selectedItem" />
</div>