AngularJS dropdown menu for input selection binding

Question

AngularJS dropdown menu for input selection binding

Hey there, I need some help with the code below:

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

>

Also, I have a dropdown as shown here:

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

I am trying to make it so that when I enter a name in the input box, if that name is in the dropdown options then it should show up as a selection. I have tried filtering by name and ordering by name, but nothing shows up in the dropdown. Can someone please advise on how to fix this issue? Thank you.

javascript angularjs angularjs-directive

Answer 1

Answer №1

Here is a potential solution that you could try:

<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

Answer 2

Here is a potential solution that you could try:

<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

Answer 3

Answer №2

plank

Check out this example I've prepared for you -)

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

Here's an ng-repeat example:

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

JS code snippet:

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

End of JavaScript snippet. Enjoy coding!

Answer 4

plank

Check out this example I've prepared for you -)

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

Here's an ng-repeat example:

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

JS code snippet:

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

End of JavaScript snippet. Enjoy coding!

AngularJS dropdown menu for input selection binding

Answer №1

Answer №2

Similar questions

Increase the value of a property within an array of objects based on certain conditions

The Jquery calculation is giving unexpected results by returning NaN instead of an integer

AngularJS: We are having trouble identifying your current location

Sending parameters dynamically in AJAX chosen

How can socket listener be dynamically added in node.js with socket.io?

Sharing Global Variables in Node.js: What's the Best Way to Pass Them into Required Files?

Creating ellipses using Three.js with a specified list of points

Assessing the validity of a boolean condition as either true or false while iterating through a for loop

Using jQuery, is it possible to retrieve the product name and image dynamically?

Challenges encountered when redirecting users with a combination of javascript and php

Tips on validating if a form has already been submitted using JavaScript and AJAX to prevent duplicate submissions

Function activation in Element requires a double click to initiate

How can I import tamplateData into my JavaScript files in Docpad?

Symfony/AngularJS Blocked Cross-Origin Request

Incorporating a CSS stylesheet into the theme settings of the Stratus 2 Beta platform

Extension Overlay for Chrome

Tips on transferring a Rails variable to Ajax

Can a link be generated that swaps out the original URL redirect for the following visitor upon clicking?

What is the most effective method for establishing functions in AngularJS?

Combining two arrays filled with objects to form a collection of Objects on a Map