CODEWITHSUNDEEP
angularjs
SrinivasAppQube
SrinivasAppQube

Reputation: 301

input type data change the select ng-options data using angularjs

i know how to bind select to the input text. but i want know reverse order of this if i enter the data in input field it effects on the select ng-options data automatically. 

<select ng-options="item.productcode as item.productname  for item in getproductList" ng-model="lining.barcode">
<option value="">--Select Product--</option></select>
<input type="text" ng-model="lining.barcode">

I want to know reverse order. Enter in input field auto matically select the ng-options

please give the solution.

Upvotes: 1

Views: 990

Answers (1)

Jose Rocha
Jose Rocha

Reputation: 1115

You need to change your data(namings). Here is an functional example.

Markup:

<body ng-app="myApp" ng-controller="myCtrl">
    <select ng-options="item as item.productname for item in getproductList track by item.productcode" ng-model="lining">
    <option value="">--Select Product--</option></select>
    <input type="text" ng-model="lining.productcode" >
</body>

Code:

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.getproductList = [{
      productcode: 1,
      productname: "name1"
    }, {
      productcode: 2,
      productname: "name2"
    }];
}]);

Working plunker for product code.

Edit

The example above track by the productcode. If you want to write on the text box the name instead the just modify markup like this

<body ng-app="myApp" ng-controller="myCtrl">
    <select ng-options="item as item.productname for item in getproductList track by item.productname" ng-model="lining">
    <option value="">--Select Product--</option></select>
    <input type="text" ng-model="lining.productname" >
</body>

Working plunker for productname.

Upvotes: 1

Related Questions