1future 1future - 6 months ago 11
AngularJS Question

How to get the selected value from a dropdown list within a table in Angular Js

In my project I have table showing a list of data. I also have a button in the table to get the details of the selected record, in this case, I only want to get the Id and the selected value from the dropdown that is in the table. So,

I have a controller with two arrays like this this:

$scope.selectItem = "";
$scope.ArrayOne = [{Id: 1, Name: "John Doe" },
{Id: 2, Name: "Jane Doe" }]

$scope.ArrayTwo = [{Id: 1, Status: "Paid"},
{Id: 2, Status: "Unpaid"}]

$scope.getDetails = function(id){
console.log(id) // getting Id here but I also need to some get the Id of the selected item in the dropdown but I'm not too sure on how to achieve this.
}


Then I'm looping the arrays in my view like this:

<table>
<tr ng-repeat="a in ArrayOne">
<td>{{a.Id}}</td>
<td>{{a.Name}}</td>
<!-- looping through array two here -->
<td>
<select ng-model="selectedItem.Id" ng-options="b.Id as b.Status"></select>
<td>
<td><button ng-click="vm.getDetails(a.Id)"> getInfo </button></td>
</tr>
</table>


I'm not so sure if how to achieve this, could someone help please? Or how would you go about to achieve this?
Thank you.

EDIT: One other thing i may have forgotten to mention... when i select the dropdown for the first record in the table .. it auto-fills up all the other drop downs in the table . How can i change this to only fill the dropdown for the selected record in the table?

Answer

Change your html to the following,

<table>
    <tr ng-repeat="a in ArrayOne track by $index"> 
        <td>{{a.Id}}</td>
        <td>{{a.Name}}</td>
        <!-- looping through array two here --> 
        <td> 
            <select ng-model="selectedIdArray[$index]" ng-options="b.Id as b.Status for b in ArrayTwo"></select>
        <td>
        <td><button ng-click="getDetails(a.Id, $index)"> getInfo </button></td>
    </tr>
</table>

Now the Id of the selected item will be populated into selectedIdArray scope variable which is an array which you can use in your controller if you know the $index value.

$scope.ArrayOne = [{Id: 1, Name: "John Doe" },
                {Id: 2, Name: "Jane Doe" }];

$scope.ArrayTwo = [{Id: 1, Status: "Paid"},
              {Id: 2, Status: "Unpaid"}];

// Creating an array of length same as length of ArrayOne. 
// Note that the default value of every element of the array will be "undefined"
$scope.selectIdArray = new Array($scope.ArrayOne.length); 

$scope.getDetails = function(id, index) {
    console.log(id);
    console.log($scope.selectedIdArray[index]); // Id of the selected item
};

Make sure to handle the cases when the user clicks the button without selecting anything from dropdown by checking whether $scope.selectedIdArray[index] is undefined or not in your getDetails(id, index) function.

The reason why I've used an array to store the selected value is because the ng-model clause is inside ng-repeat statement there by making all the dropdowns having the same ng-model value if we didn't use an array. I've used $index which ng-repeat offers to achieve that.

Hope this answers your question.

Comments