Angularjs xeditable选择的选项未显示

时间:2015-03-06 11:56:25

标签: angularjs html-select x-editable

我在表格中有可修改的行,但我似乎无法在我的下拉列表中显示所选值。这个过程中的其他一切都运行正常。

代码: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>
...

控制器:

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;
};

});

2 个答案:

答案 0 :(得分:1)

将对象切换为以下内容可解决问题...

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

并乘以1也很容易解决..

e-ng-options =&#34;(id * 1)作为productSizes中的(id,type)类型&#34;

答案 1 :(得分:0)

想出来。在将ad_types中的键的字符串值与ads中的整数值进行比较时,它会中断。解决方案是将ad_types的键强制为整数,如下所示:

<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>

并在控制器中定义toInt(id)方法:

// 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); 
}

更新的代码:http://jsfiddle.net/bzLj3a5q/13/