Adding conditional value to angular ng-table

830 Views Asked by At

I want to add glyphicon to a column based on row value in ng-table component .For example if row.firstProperty==row.secondProperty then the glyph be added to column.I know how to do this in angular Grid UI but although I review documentations and examples but ‍‍‍‍‍‍I did not find any way in ng-Table.Can anyone suggest a solution to my issue?

Edit:My scenario is that I have a custom directive that it is used to produce many pages with same style and functionality by getting page data and in part of it ng-table is used by defining template for my directive.

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 is defined in Controllers and one of the columns is html values like glyphicons and buttons that is maked base on object named actionList which is defined in each controller like below:

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

.I put the logic for creating html column to my directive to prevent repeated code from controllers and delivering it to controllers and the controller part for defining columns is as below :

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

The action value comes from directive that contains htmls.The Directive part is as below :

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

The main problem is here that if I interpolate the values of entry.showCondition I always get the value of of last item in actionList. Is there any solution that I can make html part of table base on conditions?

0

There are 0 best solutions below