How to use html in this way that filled the table, AngularJS?

Question

How to use html in this way that filled the table, AngularJS?

Navigation

#1 by (1 votes)

0

In this way I show the records in the table, I use angular-datatable.js.

Example of how the information shows the table:

'ID' 'USER' 'NAME' EMAIL '' TELEPHONE '' STATE '' CREATED '' ACTIONS '

'1' 'admin' 'Administrator' '[email protected]' '54203090' '1' '2017-02-13 18:34:01' 'BUTTONS'

This way it shows me the records but if they notice in the field state it returns a "1", I need by means of HTML to show the text "Active" if it is equal to "1" or inactive if it is equal to "2.

here's an example of how to fill the entire table.

var vm = this;
            vm.dt_data = [];               
            vm.item = {};
            vm.edit = edit;
            vm.dtOptions = DTOptionsBuilder.newOptions()
                .withOption('initComplete', function() {
                    $timeout(function() {
                        $compile($('.dt-uikit .md-input'))($scope);
                    })
                })
                .withPaginationType('full_numbers')
                .withOption('createdRow', function (row, data, dataIndex) {
                    $compile(angular.element(row).contents())($scope);
                })
                .withOption('ajax', {
                    dataSrc: function(json) {
                        json['draw']=1
                        json['recordsFiltered'] = json.records.length                            
                        json['recordsTotal'] =json.records.length
                        console.log(json.records)
                        return json.records;
                      },
                    url: 'http://localhost:808/sistemaerp/public/ws/usuarios',
                    type: 'GET',
                })
                //.withDataProp('records')
                .withOption('processing', true)
                .withOption('responsive', true);

            vm.dtColumns = [
              DTColumnBuilder.newColumn('id').withTitle('Id'),
              DTColumnBuilder.newColumn('usuario').withTitle('Usuario'),
              DTColumnBuilder.newColumn('nombre').withTitle('Nombre'),
              DTColumnBuilder.newColumn('email').withTitle('Email'),
              DTColumnBuilder.newColumn('telefono').withTitle('Telefono'),
              DTColumnBuilder.newColumn('estado').withTitle('Estado'),
              DTColumnBuilder.newColumn('created_at').withTitle('Creado'),
              DTColumnBuilder.newColumn(null).withTitle('Acciones').notSortable().renderWith(function(data,type,full){
              vm.item[data.id] = data; 
              return  ' <a href="#" data-uk-modal="{target:\'#modal_header_footer\'}" ng-click="showCase.edit(showCase.item[' + data.id + '])">'+
                      ' <i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i></a>'+
                      ' <a href="#" data-uk-modal="{target:\'#modal_header_footer_eliminar\'}" ng-click="showCase.edit(showCase.item[' + data.id + '])">'+
                      ' <i class="md-icon material-icons md-bg-red-900 uk-text-contrast">&#xE872;</i></a>';
              })                    
          ];

These are all the fields that the table shows, the data I receive from url: 'http://localhost:808/sistemaerp/public/ws/usuarios',

        vm.dtColumns = [
          DTColumnBuilder.newColumn('id').withTitle('Id'),
          DTColumnBuilder.newColumn('usuario').withTitle('Usuario'),
          DTColumnBuilder.newColumn('nombre').withTitle('Nombre'),
          DTColumnBuilder.newColumn('email').withTitle('Email'),
          DTColumnBuilder.newColumn('telefono').withTitle('Telefono'),
          DTColumnBuilder.newColumn('estado').withTitle('Estado'),
          DTColumnBuilder.newColumn('created_at').withTitle('Creado'),
          DTColumnBuilder.newColumn(null).withTitle('Acciones').notSortable().renderWith(function(data,type,full){
          vm.item[data.id] = data; 
          return  ' <a href="#" data-uk-modal="{target:\'#modal_header_footer\'}" ng-click="showCase.edit(showCase.item[' + data.id + '])">'+
                  ' <i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i></a>'+
                  ' <a href="#" data-uk-modal="{target:\'#modal_header_footer_eliminar\'}" ng-click="showCase.edit(showCase.item[' + data.id + '])">'+
                  ' <i class="md-icon material-icons md-bg-red-900 uk-text-contrast">&#xE872;</i></a>';
          })

in this field "state" DTColumnBuilder.newColumn('estado').withTitle('Estado'), in the table shows either a 1 or a 2 therefore I must say that if it is a "1" show the text "active", and if it comes a 2 "inactive" . The text should be shown in this style <span class="uk-badge uk-badge-success">Activo</span>

angularjs angular-datatables

asked by JG_GJ 20.03.2017 в 02:38

source

1 answer

Wordpress is not using page.php page [closed] Modeling in Workbench

score 1 · Accepted Answer

You can try applying a filter to your template:

app.filter('statusFilter', [function () {
    return function (item) {
        var filteredValue = item === '1' ? 'Activo' : 'Inactivo';
        return filteredValue;
    };
}]);

And then apply them to your table.

 DTColumnBuilder.newColumn('estado').withTitle('Estado').renderWith(function(data){
   return  '<span class="uk-badge uk-badge-success">' + $filter('statusFilter', data.estado) + '</span>';
 });

Or evaluating the value of data.estado right there

DTColumnBuilder.newColumn('estado').withTitle('Estado').renderWith(function(data){
  var filteredValue = data.estado === '1' ? 'Activo' : 'Inactivo';
  return  '<span class="uk-badge uk-badge-success">' + filteredValue + '</span>';
});