具有选择单元格的Angularjs ng-grid未被选择为正确的值

Question

I am trying to build a table where one of the columns is selected and I want to select the option with the value that I get from server. I am getting 4 from the server but the the one that is selected is the first option.

$scope.lotteryOptions = {
        data: 'myData',
        enableColumnResize: true,
        keepLastSelected: false,
        enableRowSelection: false,
        columnDefs: [{field: 'field1', displayName: 'field1'},
             {field: 'Status', displayName: 'Status', cellTemplate: selectTableTemplate, enableCellEdit: true},
    };

 var selectTableTemplate = "<select ng-selected=\"{{row.getProperty('Status')}}\">         <option value='1' class='ng-binding'>" + 1+ "</option>" +
                           "<option value='2' class='ng-binding'>" + 2 + "</option>" +
                           "<option value='3' class='ng-binding'>" + 3 + "</option>" +
                           "<option value='4' class='ng-binding'>" + 4 + "</option>" +
                           "<option value='5' class='ng-binding'>" + 5 + "</option>" +
                    "<option value='6' class='ng-binding'>" + 6 + "</option></select>";

the html result is:

 <select ng-selected="4">...</select> 

but is not select the 4 choice

Answer 1

ng-selected should be applied to the option tags, not select (see the docs )

$scope.lotteryOptions = {
    columnDefs: [
        {field: 'field1'},
        {field: 'Status', cellTemplate: selectTableTemplate, enableCellEdit: true}
    ],
    data: 'myData',
    enableColumnResize: true,
    enableRowSelection: false,
    keepLastSelected: false

};

 var selectTableTemplate = '<select>' +
                           '  <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>' +
                           '  <option value="3" class="ng-binding" ng-selected="COL_FIELD == 3">' + 3 + '</option>' +
                           '  <option value="4" class="ng-binding" ng-selected="COL_FIELD == 4">' + 4 + '</option>' +
                           '  <option value="5" class="ng-binding" ng-selected="COL_FIELD == 5">' + 5 + '</option>' +
                           '  <option value="6" class="ng-binding" ng-selected="COL_FIELD == 6">' + 6 + '</option>' +
                           '</select>';

Answer 2

ng-selected is already an angular attribute so there is no need to interpolate {{ }} :

var selectTableTemplate = "<select>         <option ng-selected=\"row.getProperty('Status') == 1\" value='1' class='ng-binding'>" + 1 + "</option>" +
                           "<option ng-selected=\"row.getProperty('Status') == 2\" value='2' class='ng-binding'>" + 2 + "</option>" +
                           "<option ng-selected=\"row.getProperty('Status') == 3\" value='3' class='ng-binding'>" + 3 + "</option>" +
                           "<option ng-selected=\"row.getProperty('Status') == 4\" value='4' class='ng-binding'>" + 4 + "</option>" +
                           "<option ng-selected=\"row.getProperty('Status') == 5\" value='5' class='ng-binding'>" + 5 + "</option>" +
                    "<option ng-selected=\"row.getProperty('Status') == 6\" value='6' class='ng-binding'>" + 6 + "</option></select>";

Note: This also assumes that Status is a value, not an object.

Update: ng-selected is not an attribute of select . It is only an attribute of option .