CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
J. Davidson
J. Davidson

Reputation: 3317

Binding input selection to dropdown Angularjs

Hi I have following input

<input type="text" class="form-controlb" ng-model="item.name" id="name" placeholder="Enter Name" />

And following dropdown 

                <div class="col-sm-12" ng-model="query">
                    <select ng-model="item" class="form-control" ng-options="a.name for a in addemployees | filter:name | orderBy:'name'" value="{{a.name}}">
                        <option value="">[Select Employee..]</option>

                    </select>
                </div>

Basically what I am trying to do is, when I enter name in the input box if dropdown has that name ints options to show it in dropdown. I tried to do do filter by name and than orderby name but it doesnt show any on dropdown as selection. Please let me know how to fix it. Thanks

Upvotes: 0

Views: 17252

Answers (2)

user3266329
user3266329

Reputation: 15

plank

I hope my example will be useful -)

   <table>
    <tr>
        <td align="right">Search :</td>
        <td><input ng-model="query[queryBy]" /></td>
    </tr>           
    <tr>
        <td align="right">Search By :</td>
        <td>
            <select ng-model="queryBy">
                <option value="$"></option>
                <option value="name">NAME</option>
                <option value="company">COMPANY</option>
                <option value="designation">DESIGNATION</option>
            </select>   
        </td>
    </tr>
</table>

ng-repeat:

            <tr>
            <tr ng-repeat="emp in employees | filter:query">
            <td>{{emp.name}}</td>
            <td>{{emp.company}}</td>
            <td>{{emp.designation}}</td>
        </tr>

JS:

angular.module('module3', [])
.controller('testCtrl3', function($scope){
$scope.query = {}
$scope.queryBy = '$'
$scope.items = [
  {
    "name" : "Ananchenko Juriy",
    "company" : "GOOGLE. Ltd",
    "designation" : "Creativ Director"
  },
  {
    "name" : "Ananchenko",
    "company" : "GOOGLE"
  },
  {
    "name" : "Korman Juriy",
    "company" : "GOOGLE. Ltd",
    "designation" : "stager na ispitatelnom sroke"
  }
];
$scope.orderProp="name";

});

Upvotes: 1

akonsu
akonsu

Reputation: 29576

something like this may work:

<input type="text" ng-model="text" />
<select ng-model="selectedOption" ng-options="option.name for option in options">
</select>

$scope.options = [{
  name: 'a',
  value: 'value-a'
}, {
  name: 'b',
  value: 'value-b'
}];

$scope.selectedOption = $scope.options[0];

$scope.$watch('text', function(v) {
  for (var i in $scope.options) {
    var option = $scope.options[i];
    if (option.name === v) {
      $scope.selectedOption = option;
      break;
    }
  }
});

http://plnkr.co/edit/Lj0p3wig9JfOM0UkpDrd

Upvotes: 4

Related Questions