Ioana Cucuruzan Ioana Cucuruzan - 4 months ago 31
AngularJS Question

Angularjs xeditable selected option not shown

I have editable rows in a table and I can't seem to show the selected value in my dropdown list. Everything else in the process works fine.

Code at: http://jsfiddle.net/bzLj3a5q/7/

Html:

...
<span editable-select="ad.ad_type_id" e-name="ad_type_id" e-form="rowform" e-ng-options="id as type for (id,type) in ad_types" onshow="showType(ad)">
{{ ad_types[ad.ad_type_id] }}
</span>
...


Controller:

var app = angular.module("app", ['xeditable']);

app.run(function (editableOptions) {editableOptions.theme = 'bs3'; });

app.controller('Ctrl', function ($scope, $filter, $http) {

$scope.ads = [
{
"id": "abc",
"ad_type_id": 1
},
{
"id": "def",
"ad_type_id": 2

}
];


$scope.ad_types = {
"1": "Type1",
"2": "Type2",
"3": "Type3"
};

$scope.showType = function(ad) {
$scope.ad_type_id = ad.ad_type_id;
$scope.apply;
};


});

Answer

Figured it out. It was breaking when comparing the string value of the keys in ad_types with the integer values in ads. The solution is to force the keys of ad_types to integer like this:

<span editable-select="ad.ad_type_id" e-name="ad_type_id" e-form="rowform" e-ng-options="toInt(id) as type for (id,type) in ad_types">{{ ad_types[ad.ad_type_id] }}</span>

and define the toInt(id) method in the controller:

// We need this to force the key of the ad_types object to an integer
// (as the API returns integer values for ad_type_id)
$scope.toInt = function(key) {
    // 10 is the radix, which is the base
    return parseInt(key, 10); 
}

The updated code: http://jsfiddle.net/bzLj3a5q/13/