将条件值添加到角度ng-table

时间:2017-01-02 07:49:33

标签: angularjs ngtable

我想基于ng-table组件中的行值将glyphicon添加到列中。例如,如果row.firstProperty==row.secondProperty,则将字形添加到column.I知道如何在角度网格UI中执行此操作但是虽然我查看了文档和示例,但我没有找到任何方法在ng-Table中。是否有人建议解决我的问题?

编辑:我的场景是我有一个自定义指令,它用于通过获取页​​面数据来生成具有相同样式和功能的许多页面,并且部分使用ng-table通过为我的指令定义模板来使用。

NG-table.html

<table ng-table="to.tableParams" class="table" show-filter="{{::to.showFilter}}">
<tr ng-show="to.showHeaders">
    <th class="th-select" ng-repeat="column in to.columns">{{column.title}}</th>
</tr>
<tr ng-repeat="row in $data">
    <td ng-repeat="column in to.columns"  ng-show="column.visible" sortable="column.field" ng-click="save(row)">
        {{row[column.field][column.subfield] || row[column.field]}}
        <span compile="column.getValue()" ></span>
    </td>
</tr>

ngTable Columns在Controllers中定义,其中一列是html值,如glyphicons和按钮,它们基于名为 actionList 的对象,在每个控制器中定义,如下所示:

                                    vm.actionList = [
                                    {
                                        name: 'edit',
                                        body: function (row) {
                                            $state.go("editrule", {ruleId: row.id});
                                        },
                                        glyph: 'glyphicon-pencil',
                                        permission: $scope.permission.edit,
                                        showCondition:"true"
                                    },
                                    {
                                        name: 'view',
                                        body: function (row) {
                                            $state.go("showrule", {ruleId: row.id});
                                        },
                                        glyph: "glyphicon-eye-open",
                                        permission: $scope.permission.watch,
                                        showCondition:"row.modifiedDate==row.createDate"

                                    },
                                    {
                                        name: 'history',
                                        body: function (row) {
                                            $state.go("rulehistory", {ruleId: row.id});
                                        },
                                        glyph: "glyphicon-info-sign",
                                        showCondition: "row.modifiedDate!=row.createDate",
                                        permission: $scope.permission.history
                                    }
                                ];

。我将用于创建html列的逻辑放到我的指令中,以防止来自控制器的重复代码并将其传递给控制器​​,并且用于定义列的控制器部分如下所示:

            vm.columns = [
            {
                title: $translate.instant('URL'),
                translate: "URL",
                field: 'url',
                visible: true,
                alignment: 'text-align-lg-left'
            },
            {
                title: $translate.instant('MATCH_TYPE'),
                translate: "MATCH_TYPE",
                field: 'matchType',
                visible: true,
                alignment: 'text-align-lg-center',
                filter: [{lowercase: []}]
            },
            {title: $translate.instant('PRIORITY'), translate: "PRIORITY", field: 'priority', visible: true,alignment: 'text-align-lg-center'},
            {title: $translate.instant('SOURCE'), tanslate: "SOURCE", field: 'source', visible: true,alignment: 'text-align-lg-center'},
            {title: $translate.instant('CATEGORY'), translate: "CATEGORY", field: 'category', visible: true,alignment: 'text-align-lg-center'},
            {
                title: $translate.instant('CREATE_DATE'),
                translate: "CREATE_DATE",
                field: 'createdDate',
                visible: true,
                alignment: 'text-align-lg-center'
            },
            {
                title: $translate.instant('LAST_CHANGE'),
                translate: "LAST_CHANGE",
                field: 'modifiedDate',
                visible: true,
                alignment: 'text-align-lg-center'
            },
            {title: $translate.instant('ACTION')  ,translate: "ACTION", field: 'action', visible: true,alignment: 'text-align-lg-center'},
            {title: '', visible: true, getValue: htmlValue, id: "actionList"}/*actions*/
        ];

    function htmlValue() {
        return $sce.trustAsHtml(actions);
    }

动作值来自包含htmls的指令。指令部分如下:

                scope.html = function htmlValue() {
                    var html = "";

                    /*intentionaly angular ng-repeat not used*/

                    for (var i = 0; i < scope.actionList.length; i++) {
                        scope.entry = scope.actionList[i];
                        scope.permission = scope.entry.permission;
                        scope.myglyph = scope.entry.glyph;


                        if (typeof scope.entry.permission == 'undefined' || scope.entry.permission == true) {

                                debugger


                                html = '<button ng-show="{{entry.condition}}"   type="button"   class="btn btn-list"  ng-click=' + $interpolate("{{entry.name}}(row)")(scope) + '> ' +
                                    '<span class=\"glyphicon ' + $interpolate("{{entry.glyph}}")(scope) + '\"></span>' +
                                    '</button>' + html;

                            console.log("this is test");
                            console.log(scope.test);



                        }

                    }

                    }



                    scope.$watch('refreshDataFilter', function (newValue, oldValue) {
                        /*EXTRACT ACTIONS*/
                        for (var i = 0; i < scope.actionList.length; i++) {
                            var entry = scope.actionList[i];
                            Object.defineProperty(scope, entry.name, {value: entry.body});
                            Object.defineProperty(scope, entry.showCondition, {value: "aaa"});
                        }
                        /*define table data filler*/
                        if (newValue == true) {
                            renderTable();
                            scope.refreshDataFilter = false;
                        }
                    });

主要问题在于,如果我插入entry.showCondition的值,我总是得到 actionList 中最后一项的值。有什么解决方案可以根据条件制作表格的HTML部分吗?

0 个答案:

没有答案