在Javascript和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.

这是我的代码。当组合框的值发生更改时,我需要找到一种方法来搜索$ scope.options中数组中的值。

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

我尝试从函数调用传递索引,但这确实有效。我也试过indexOf,但是因为我只有名字而不是组合框中的id,所以不会工作。

2 个解决方案

#1

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

您应该使用ng-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

这是一个JSFiddle

Angular ngOptions doc

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

注意:$ scope.selectedValue必须引用同一个对象,而不仅仅是相等。

#2

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.

所选值为“ng-model”并自动更新。

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

查看我为您制作的这个小提琴示例。

#1