Binding input selection to dropdown Angularjs

Question

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

akonsu · Accepted Answer · 2014-02-04 21:59:04Z

4

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

answered Feb 4, 2014 at 21:59

akonsu

29.7k39 gold badges126 silver badges205 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3266329 · Accepted Answer · 2014-02-04 23:21:25Z

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";

});

Collectives™ on Stack Overflow

Binding input selection to dropdown Angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related