CODEWITHSUNDEEP
javascripthtmlangularjs
Ankit Agarwal
Ankit Agarwal

Reputation: 63

Find value in array in Javascript and AngularJS

This is my code. I need to find a way to search the value in the array in $scope.options when the value of the combo box is changed.

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html ng-app>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../angular.js"></script>
        <script>
            function reportController($scope){
                $scope.options=[{name:'option 1', id:'1'},{name:'option 2', id:'2'},{name:'option 3', id:'3'}];

                $scope.selectedValue = {name:'option 1', id:'1'};
                $scope.updatedName = $scope.selectedValue.name;
                $scope.updatedId = $scope.selectedValue.id;

                $scope.updateCombo = function()
                {
                    console.log("inside updateCombo");

                    comboVal = document.getElementById("nameCombo").value;
                    arrIndex = $scope.options.indexOf(comboVal);
                    console.log("combo box selected value = " + comboVal + " :: index = "+ arrIndex);
                    //$scope.selectedValue=$scope.options[index];
                }
            }
        </script>
    </head>
    <body>
        <div ng-controller="reportController">
            <select id ="nameCombo" ng-model="selectedValue" ng-change="updateCombo()">
            <option ng-repeat="value in options" >{{value.name}}</option>
            </select>
            <p>Name : {{selectedValue.name}}</p>
            <p>ID : {{selectedValue.id}}</p>
        </div>
    </body>
</html>

I tried with passing the index from the function call, but that does work. I also tried indexOf, but that wont work as I only have the name and not the id from the combo box.

Upvotes: 0

Views: 699

Answers (2)

Thomas Guillory
Thomas Guillory

Reputation: 5729

You should use ng-options instead of building yourself your options:

Template:

<div ng-app ng-controller="reportController">
    <select id ="nameCombo" ng-model="selectedValue" ng-options="option.name for option in options">
    </select>
    <p>Name : {{selectedValue.name}}</p>
    <p>ID : {{selectedValue.id}}</p>
</div>

Controller:

function reportController($scope){
    $scope.options=[
        {name:'option 1', id:'1'},
        {name:'option 2', id:'2'},
        {name:'option 3', id:'3'}];

    $scope.selectedValue = $scope.options[0];
}

Here is a JSFiddle

Angular ngOptions doc

NB: $scope.selectedValue has to refer to the same object, not just be equal.

Upvotes: 0

Amir Popovich
Amir Popovich

Reputation: 29836

You probably want to do something like this: 

<select ng-model="selectedValue" ng-options="opt.name for opt in options"></select>

The selected value is the "ng-model" and gets updated automatically.

Check this Fiddle example that I've made for you.

Upvotes: 1

Related Questions