Display multiple values using ng-show

Question

Display multiple values using ng-show

This is a Table Example

 <table class="table table-bordered table-responsive table-hover add-lineheight table_scroll">
        <thead>
            <tr>
                <th ng-hide="hidecolumn == key" ng-repeat="(key, value) in localNew[0]">
                    {{key}}
                </th>
            </tr>
      </thead>
      <tbody>
            <tr ng-repeat="test in localNew">
                <td ng-hide="hidecolumn == key" ng-repeat="(key, value) in test">
                    {{value}}
                </td>
            </tr>
        </tbody>
    </table>

In this example, the hidecolumn function hides specific columns that are not wanted to be displayed. For instance, in the controller data is defined as follows:

$scope.localNew = [{ 'name': 'name1', 'age': 24, "salary": 2500, "s": 5 }, { 'name': 'name2', 'age': 26, "salary": 2600, "s": 5 }];

The variable used to hide a column is:

$scope.hidecolumn = "salary";

This functionality works correctly.

If there is a need to hide multiple columns, the scope variable can be defined like this:

$scope.hidecolumn = "name,salary";

Instructions on managing the HTML table to hide multiple columns would be greatly appreciated.

javascript html css angularjs

Answer 1

Answer №1

It is recommended to utilize an array instead of a string in this scenario:

$scope.hiddenColumns = ['name', 'salary'];

Implement a function to determine whether the current column should be hidden or not:

$scope.shouldHideColumn = function(column) {
  if ($scope.hiddenColumns.includes(column.salary)) {
    return true;
  }

  return false;
};

Then, incorporate the following code snippet into your HTML:

<th ng-hide="shouldHideColumn(value)" ng-repeat="(key, value) in localNew[0]">
  {{key}}
</th>

Answer 2

It is recommended to utilize an array instead of a string in this scenario:

$scope.hiddenColumns = ['name', 'salary'];

Implement a function to determine whether the current column should be hidden or not:

$scope.shouldHideColumn = function(column) {
  if ($scope.hiddenColumns.includes(column.salary)) {
    return true;
  }

  return false;
};

Then, incorporate the following code snippet into your HTML:

<th ng-hide="shouldHideColumn(value)" ng-repeat="(key, value) in localNew[0]">
  {{key}}
</th>

Answer 3

Answer №2

Utilizing the Array with its handy indexOf functions is an effective way to achieve this:

$scope.hidecolumn = [ "name", "salary" ];

// Displaying Content

<td ng-hide="hidecolumn.indexOf(key) !== -1" ng-repeat="(key, value) in test">
  {{value}}
</td>

Answer 4

Utilizing the Array with its handy indexOf functions is an effective way to achieve this:

$scope.hidecolumn = [ "name", "salary" ];

// Displaying Content

<td ng-hide="hidecolumn.indexOf(key) !== -1" ng-repeat="(key, value) in test">
  {{value}}
</td>

Answer 5

Answer №3

If you prefer, another way to accomplish this is as follows:

<td ng-hide="hidecolumn.indexOf(key) !== -1" ng-repeat="(key, value) in test">
    {{value}}
</td>

Answer 6

If you prefer, another way to accomplish this is as follows:

<td ng-hide="hidecolumn.indexOf(key) !== -1" ng-repeat="(key, value) in test">
    {{value}}
</td>

Answer 7

Answer №4

Have you given this a shot?

<tr ng-repeat="(index, item) in data" ng-show="index !== 'name' && index !== 'age'">
  {{item}}
</tr>

Answer 8

Have you given this a shot?

<tr ng-repeat="(index, item) in data" ng-show="index !== 'name' && index !== 'age'">
  {{item}}
</tr>

Answer 9

Answer №5

To use the function, you can do this:

ng-hide="hidecolumn(key)"

Here is the JavaScript code:

  var hideColumn = function(key) {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    if (fruits.indexOf(key)) === 0 return false;
  }

The ng-hide attribute will hide the element if the function returns true.

Answer 10

To use the function, you can do this:

ng-hide="hidecolumn(key)"

Here is the JavaScript code:

  var hideColumn = function(key) {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    if (fruits.indexOf(key)) === 0 return false;
  }

The ng-hide attribute will hide the element if the function returns true.

Answer 11

Answer №6

If you want to ensure consistency in your code and avoid repeating the same logic, consider creating a custom method for arrays called contains that checks if an element is present:

Array.prototype.contains = function contains(obj) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === obj) {
            return true;
        }
    }
    return false;
};

Once you have defined this method, you can create your array like so:

$scope.hiddencolumns = [ "name", "salary" ];

Now you can easily check if an element exists in the array using the contains method:

<td ng-hide="hiddencolumns.contains(key)" ng-repeat="(key, value) in test">
    {{value}}
</td>

To convert a comma-separated string into an array, you can use the following code:

var array = $scope.hidecolumn.split(',');

Answer 12

If you want to ensure consistency in your code and avoid repeating the same logic, consider creating a custom method for arrays called contains that checks if an element is present:

Array.prototype.contains = function contains(obj) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === obj) {
            return true;
        }
    }
    return false;
};

Once you have defined this method, you can create your array like so:

$scope.hiddencolumns = [ "name", "salary" ];

Now you can easily check if an element exists in the array using the contains method:

<td ng-hide="hiddencolumns.contains(key)" ng-repeat="(key, value) in test">
    {{value}}
</td>

To convert a comma-separated string into an array, you can use the following code:

var array = $scope.hidecolumn.split(',');

Answer 13

Answer №7

After transforming my string into an array using the code var array = string.split(',');, I was able to achieve the outcome I wanted.

Answer 14

After transforming my string into an array using the code var array = string.split(',');, I was able to achieve the outcome I wanted.

Display multiple values using ng-show

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Guide on how to synchronously update a value following an Ajax request

Utilize AJAX to fetch additional data upon clicking the ID row in PHP

Utilizing NodeJS to Schedule Emails based on User Input within React Application

Discovering the most efficient route on a looped set of items

An algorithm designed to categorize data points and display their frequency

PHP form headaches: issues with submitting and posting

Update component state based on input value

"Adding the Whats app share button underneath your Blogger post: A step-by-step guide

What is the process for transmitting data using an Ajax Query to a Controller and subsequently displaying a new JSP page returned by the Controller?

Can Bootstrap 4 CSS be used to display a yellow triangle with text in the bottom right corner of a card?

Bootstrap: utilizing a layout where text appears on two lines rather than one

Enhance your Ionic 2 application with a versatile barcode scanner featuring multiple fields

Pre-task for Angular's $resource request

Integrating AJAX feedback messages into Formcarry

Error encountered in React JS: Anticipated input was "CALC", "dimension", "number", but received unexpected end of input. CompileError originates from undefined CSS selector

Present data outside of a traditional table format

Scaling boxes responsively according to screen size utilizing Bootstrap

Exploring the ins and outs of console interactions in JavaScript

Displaying HTML tags stored in a PHP variable correctly within OpenCartOREffect

"Upon setting the state in React, the Full Calendar refreshes and retrieves events