How to get the value of a Select box implemented using ng-options which is inside a loop?

Question

I have a list page displaying customer information and in each row of customers there is a Select box with some options like Edit, Cancel, Delete etc. The customers are displayed using ng-repeat directive and the select box with above mentioned options are implemented using ng-options.

I tried to get the value of selected item from drop down against each row, but it is not working, the code worked when I pasted the select box code snippet outside the loop.

Here is my code to display the customers

  <table class="table display table-striped table-bordered" ng-table="tableParams">

    <tr ng-repeat="customer in $data | filter: search | filter :name">
       <td data-title="'Reseller ID'" sortable="'ResellerId'" > 
            {{customer.ResellerId}}
        </td>
        <td data-title="'Reseller Name'" sortable="'ResellerName'">
            {{customer.ResellerName}}
        </td>
        <td data-title="'Customer ID'" sortable="'CustomerID'">
            {{customer.CustomerID}}
        </td>
        <td data-title="'Customer Name'" sortable="'CustomerName'">
            {{customer.CustomerName}}
        </td>
        <td data-title="'Status'" sortable="'Status'">
            {{customer.Status}}
        </td>
        <td data-title="'Available Funds'" sortable="'AvailableFunds'">
            {{customer.AvailableFunds}}
        </td>
        <td data-title="'Created Date'" sortable="'CreatedDate'">
            {{customer.CreatedDate}}
        </td>

        <td>
        <form name="statusForm">
        <select class="form-control status" ng-model="actionslist"  name="actions" ng-options="action.name for action in action_options" ng-change="editCustomer()">
            <option value="">Select Action</option>
        </select>
        </form>
        </td>
        <td><a href="#" class="btn btn-info" data-toggle="tooltip" data-original-title="View Domains"><i class="fa fa-desktop"></i></a> <a href="#" class="btn btn-warning" data-toggle="tooltip" data-original-title="View Subscriptions"><i class="fa fa-rss"></i></a> <a href="#" class="btn btn-success" data-toggle="tooltip" data-original-title="Login"><i class="fa fa-sign-in"></i></a> </td>
    </tr>
  </table>

Here is my Angular code

var CustomerController = function ($scope, $filter, $http, ngTableParams) {
    $scope.action_options = [{
        name: 'Edit',
        value: 'edit'
    }, {
        name: 'Suspend',
        value: 'suspend'
    }, {
        name: 'Cancel',
        value: 'cancel'
    }, {
        name: 'Delete',
        value: 'delete'
    }, {
        name: 'Reset Password',
        value: 'reset'
    }];

    $scope.editCustomer = function () {
        //$scope.itemList=[];
        alert($scope.item.value);
        //alert($scope.selected.actions);

    }
}

Could anyone tell me what is the mistake I'm doing here ?

keep watch on your ng-model and you will get the values in it :) — Aditya Sethi, Sep 15 '14 at 13:15

Narek Mamikonyan · Accepted Answer · 2014-09-15T14:33:21.527

1

It will be saved through your ng-model

$scope.editCustomer = function () {
    alert($scope.actionslist);
}

working fiddle

edited Sep 15 '14 at 14:33

answered Sep 15 '14 at 13:14

Narek Mamikonyan

4,601
2
24
30

I'm getting undefined in alert. Just below the select box, I could able to print the value by using below code {{actionslist.value}}. But when I tried the same in my controller js file, I did nothing – Jayesh Ambali Sep 15 '14 at 13:53
Your suggestion will work only when the select box is outside the loop. – Jayesh Ambali Sep 15 '14 at 14:00
yes you right, I have already updated the example and added working fiddle link, if you dont have another issues with this question please upvote my answer, thanks in advance :) – Narek Mamikonyan Sep 15 '14 at 14:34

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

Try this:

<select ng-model="action" ng-options="obj.value as obj.name for obj in action_options"></select>

and check out this answer https://stackoverflow.com/a/12140310/1530725

edited May 23 '17 at 12:05

Community

1
1

answered Sep 15 '14 at 14:52

Kairat Jenishev

123
8

How to get the value of a Select box implemented using ng-options which is inside a loop?

2 Answers2