CODEWITHSUNDEEP
javascriptangularjsshow-hide
arnold
arnold

Reputation: 1712

Conditional data show hide in Angularjs

I am working on an application where I have to generate a table report, based on user filter.

And user can filter the result and submit new query using different parameter. Depending one of the checkbox and the results lists,I have to show hide a column in table.

How I can implement in an Angular way?

Upvotes: 2

Views: 35589

Answers (3)

geg
geg

Reputation: 4795

Consider adding a conditional style to a <col/> with ng-style or ng-class

Upvotes: 0

code-sushi
code-sushi

Reputation: 719

Showing and hiding columns seems a lot more involved than this to me. It's more than just simply applying a conditional ng-show attribute to an event handler -- at least, I have not found that idea to work as intended.

I'm currently researching how to hide a whole column of data in a database table and I came across this blog post just now. It sounds like a workable solution and I can actually understand what the author is talking about -- which is a big deal for me as I'm only just learning my way around Angular. Here is the link in case it helps you or someone else out on this issue. I'll report back later whether it helped me or not.

http://entwicklertagebuch.com/blog/2013/11/datatable-with-fully-dynamic-columns-in-angularjs/

(Sample code from the link)

function createTDElement(directive) {
var table = angular.element('<table><tr><td ' + directive + '></td></tr></table>');
return table.find('td');
}
app.directive('item', function($compile) {
  function createTDElement(directive) {
    var table = angular.element('<table><tr><td ' + directive + '></td></tr></table>');
    return table.find('td');
  }

  function render(element, scope) {
    var column, html, i;
    for (i = 0; i < scope.columns.length; i++) {
      column = scope.columns[i];
      if (column.visible) {
        html = $compile(createTDElement(column.directive))(scope);
        element.append(html);
      }
    }

  }

  return {
    restrict: 'A',
    scope: {
      item: "=",
      columns: "="
    },
    controller: function($scope, $element) {
      $scope.$watch(function() {
        return $scope.columns;
      }, function(newvalue, oldvalue) {
        if (newvalue !== oldvalue) {
          $element.children().remove();
          render($element, $scope);
          $compile($element.contents())($scope);
        }
      }, true);
    },
    compile: function() {
      return function(scope, element) {
        render(element, scope);
      }

    }
  };

});

Upvotes: 1

SET001
SET001

Reputation: 11728

You can use ng-show with condition, like this:

<select ng-model="filter">
  <option value="blah"></option>
  <option value="foo"></option>
</select>
<table>
  <tr>
    <td>1</td>
    <td ng-show="filter=='blah'">blah blah</td>
  </tr>
  <tr>
    <td>2</td>
    <td ng-show="filter=='blah'">foo foo</td>
  </tr>
</table>

Upvotes: 21

Related Questions