Find value in array in Javascript and AngularJS

Question

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.

Amir Popovich · Accepted Answer · 2014-05-13 06:53:58Z

1

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.

edited May 13, 2014 at 6:53

answered May 13, 2014 at 6:48

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

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

Comments

Thomas Guillory · Accepted Answer · 2014-05-13 07:23:26Z

0

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.

edited May 13, 2014 at 7:23

answered May 13, 2014 at 6:53

Thomas Guillory

5,7393 gold badges26 silver badges47 bronze badges

Collectives™ on Stack Overflow

Find value in array in Javascript and 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