Access select element in ng-grid

Question

i have this grid options:

$scope.ngOptions = {
        data: 'data',
        columnDefs: [
             {field: 'Status', displayName: "Status", cellTemplate: selectTableTemplate, enableCellEdit: true},
             {cellTemplate: '<button ng-click="update(col, row)">' + Save + '</button>', enableCellEdit: false }]
    };


var selectTableTemplate = "<select ng-model='Status' ng-change='changeToFirst(Status, row)'>" +
                                '<option value="1" class="ng-binding" ng-selected="COL_FIELD == 1">' + 1 + "</option>" +
                                '<option value="2" class="ng-binding" ng-selected="COL_FIELD == 2">' + 2 + "</option>"</select>";

EDIT: how in ng-change function changeToFirst i get the clicked element and select the first option selected?

i do this like this:

 row.elm.children().find('select').find('[value=1]').prop('selected', true);

but i sure that not the right way

can you give more info? Maybe Im noob and don't understand why ppl up-vote the question. Do you try to fetch selected element and at the same time set 1st one, right? — Maxim Shoustin, Nov 27 '13 at 10:18
I think you can write custom directive that will take care about selected item. — Maxim Shoustin, Nov 27 '13 at 10:50
Can you try to reproduce this issue into Fiddle, template: http://jsfiddle.net/9Ymvt/807/ — Maxim Shoustin, Nov 27 '13 at 13:13

score 0 · Answer 1 · answered Nov 27 '13 at 12:07

You don't need to write your handler function to update values in your data. Angular ng-model will make it for you instead. Assuming that you have "Status" field in your data objects:

$scope.checkStatusChange = function (entity){
      console.log(entity.Status);
};

var selectTableTemplate = '<select ng-model="row.entity.Status" ng-change="checkStatusChange(row.entity)">' +
                                     '<option value="1" ng-selected="row.entity.Status == 1">1</option>' +
                                     '<option value="2" ng-selected="row.entity.Status == 2">2</option>' +
                          '</select>';

Reference "row.entity" is a link to data belonging to current row. So you don't need to work directly with "select" element, data binding will do all the magic. Function "checkStatusChange" is provided for demo purposes.

this give me the value of the status i need the element – Asaf Nov 27 '13 at 12:46 — Asaf, Nov 27 '13 at 12:46

Access select element in ng-grid

1 Answers1