Using NgTable to sort and filter selections

Question

Using NgTable to sort and filter selections

I am working with two select elements. The first select is populated with names, and I would like the second select to only display the ages corresponding to the selected name.

For example:

If I select Jacob in the first select, I want the Age select to only show 27 as an option.

Here is a demonstration on Plunker.

<table ng-table="tableParams" show-filter="true" class="table">
    <tr ng-repeat="user in $data" ng-class="{ 'emphasis': user.money > 500 }">
        <td data-title="'Name'" filter="{ 'name': 'select' }" filter-data="names($column)">
            {{user.name}}
        </td>
        <td data-title="'Age'" filter="{ 'age': 'select' }" filter-data="ages($column)">
            {{user.age}}
        </td>
    </tr>
</table>

I am looking for a way to dynamically filter the options in the second select based on the selection made in the first select element. How can I achieve this?

javascript angularjs ngtable

Answer 1

Answer №1

Check out this demo link: http://plnkr.co/edit/3tLixkFKYgpXfx04PbaD?p=preview

Custom templates can be a useful approach for creating filters. By creating custom templates, you gain full control over the arrays that the filters are connected to and can easily add change events:

<script type="text/ng-template" id="ng-table/filters/name.html">
  <select ng-options="name.id as name.title for name in nameOptions" 
          ng-model="params.filter()['name']" 
          ng-change="ages(column, params.filter()['name'])">
  </select>
</script>
<script type="text/ng-template" id="ng-table/filters/age.html">
  <select ng-options="age.id as age.title for age in ageOptions" 
          ng-model="params.filter()['age']"></select>
</script>

After creating the templates, integrate them into your ng-table markup like this:

<td data-title="'Name'" filter="{ 'name': 'name' }" filter-data="names($column)">
  {{user.name}}
</td>
<td data-title="'Age'" filter="{ 'age': 'age' }" filter-data="ages($column)">
  {{user.age}}
</td>

To populate the option arrays, you can utilize your current names and ages functions:

$scope.names = function(column) {
    ...

    $scope.nameOptions = names;

    ...
};


$scope.ages = function(column, name) {      
  var def = $q.defer(),
      arr = [],
      ages = [];
  angular.forEach(data, function(item) {
      if (inArray(item.age, arr) === -1) {
          if (angular.isUndefined(name) || item.name === name) {
            arr.push(item.age);
            ages.push({
                'id': item.age,
                'title': item.age
            });
          }
      }
  });

  $scope.ageOptions = ages;

  def.resolve(ages);
  return def;
};

Answer 2

Check out this demo link: http://plnkr.co/edit/3tLixkFKYgpXfx04PbaD?p=preview

Custom templates can be a useful approach for creating filters. By creating custom templates, you gain full control over the arrays that the filters are connected to and can easily add change events:

<script type="text/ng-template" id="ng-table/filters/name.html">
  <select ng-options="name.id as name.title for name in nameOptions" 
          ng-model="params.filter()['name']" 
          ng-change="ages(column, params.filter()['name'])">
  </select>
</script>
<script type="text/ng-template" id="ng-table/filters/age.html">
  <select ng-options="age.id as age.title for age in ageOptions" 
          ng-model="params.filter()['age']"></select>
</script>

After creating the templates, integrate them into your ng-table markup like this:

<td data-title="'Name'" filter="{ 'name': 'name' }" filter-data="names($column)">
  {{user.name}}
</td>
<td data-title="'Age'" filter="{ 'age': 'age' }" filter-data="ages($column)">
  {{user.age}}
</td>

To populate the option arrays, you can utilize your current names and ages functions:

$scope.names = function(column) {
    ...

    $scope.nameOptions = names;

    ...
};


$scope.ages = function(column, name) {      
  var def = $q.defer(),
      arr = [],
      ages = [];
  angular.forEach(data, function(item) {
      if (inArray(item.age, arr) === -1) {
          if (angular.isUndefined(name) || item.name === name) {
            arr.push(item.age);
            ages.push({
                'id': item.age,
                'title': item.age
            });
          }
      }
  });

  $scope.ageOptions = ages;

  def.resolve(ages);
  return def;
};

Answer 3

Answer №2

I attempted to tackle this issue. Please confirm if it meets your requirements.
DEMO: Fiddle

<body ng-app ng-controller="AppCtrl">
<select ng-model="selectedName" ng-options="item as item for item in name">
    <option value="">Select Name</option>
</select>
<pre>selectedItem: {{selectedName | json}}</pre>

<select ng-model="selectedage" ng-options="item as item for item in age">
    <option ng-if="!selectedage" value="">Select age</option>
</select>
<pre>selectedItem: {{selectedage | json}}</pre>
</body>

JS:

function AppCtrl($scope) {

$scope.name = ["Ved", "James", "Doe","Prakash" ];
var age = {Ved :["25"],James :["26"],Doe:["27"],Prakash:["28"]};
    $scope.$watch('selectedName', function(newValue, oldValue) {
      if ( newValue) {
            var name = $scope.selectedName;
  $scope.age = age[name];
    }
  });
}

Answer 4

I attempted to tackle this issue. Please confirm if it meets your requirements.
DEMO: Fiddle

<body ng-app ng-controller="AppCtrl">
<select ng-model="selectedName" ng-options="item as item for item in name">
    <option value="">Select Name</option>
</select>
<pre>selectedItem: {{selectedName | json}}</pre>

<select ng-model="selectedage" ng-options="item as item for item in age">
    <option ng-if="!selectedage" value="">Select age</option>
</select>
<pre>selectedItem: {{selectedage | json}}</pre>
</body>

JS:

function AppCtrl($scope) {

$scope.name = ["Ved", "James", "Doe","Prakash" ];
var age = {Ved :["25"],James :["26"],Doe:["27"],Prakash:["28"]};
    $scope.$watch('selectedName', function(newValue, oldValue) {
      if ( newValue) {
            var name = $scope.selectedName;
  $scope.age = age[name];
    }
  });
}

Answer 5

Answer №3

Check out this demo: http://plnkr.co/edit/5fvtiept6M6VpAmo8a5f?p=preview. You can use the value selected in the first dropdown as a filter for the second dropdown.

Alternatively

You can bind the selected value from the first dropdown, which is "formData.name" in this example, to the second dropdown.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>

    <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

<body ng-app="main" ng-controller="DemoCtrl">
    <table ng-table="tableParams" show-filter="true" class="table">
      <tr>
            <td data-title="'Name'">
              <select name="name" 
                data-ng-model="formData.name"
                ng-options="user.name for user in $data" 
                ng-change="changeAge(formData.name)"
                required >
                    <option value="">Select</option>
                </select>
            </td>
            <td data-title="'Age'">
                <select name="age" data-ng-model="formData.age"
                >
                  <option value="">Select</option>
                  <option value="">{{formData.name.age}}</option>
                </select>
            </td>
            </tr>
            <tr ng-repeat="user in $data|filter:formData.name">
              <td>
                {{user.name}}
              </td>
              <td>
                {{user.age}}
              </td>
            </tr>
    </table>    
</body>
</html>

Answer 6

Check out this demo: http://plnkr.co/edit/5fvtiept6M6VpAmo8a5f?p=preview. You can use the value selected in the first dropdown as a filter for the second dropdown.

Alternatively

You can bind the selected value from the first dropdown, which is "formData.name" in this example, to the second dropdown.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>

    <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

<body ng-app="main" ng-controller="DemoCtrl">
    <table ng-table="tableParams" show-filter="true" class="table">
      <tr>
            <td data-title="'Name'">
              <select name="name" 
                data-ng-model="formData.name"
                ng-options="user.name for user in $data" 
                ng-change="changeAge(formData.name)"
                required >
                    <option value="">Select</option>
                </select>
            </td>
            <td data-title="'Age'">
                <select name="age" data-ng-model="formData.age"
                >
                  <option value="">Select</option>
                  <option value="">{{formData.name.age}}</option>
                </select>
            </td>
            </tr>
            <tr ng-repeat="user in $data|filter:formData.name">
              <td>
                {{user.name}}
              </td>
              <td>
                {{user.age}}
              </td>
            </tr>
    </table>    
</body>
</html>

Using NgTable to sort and filter selections

Answer №1

Answer №2

Answer №3

Similar questions

The loading GIF in jQuery is malfunctioning when displayed simultaneously on multiple div elements

What is the most effective way to construct this array?

The JavaScript syntax dollar sign

Passing JSON Data Between Functions within an Angular Controller

JavaScript code to obscure

Encountering difficulty when trying to establish onclick functionality on dynamically loaded table through

The evaluate function is not functioning as expected

The function's name has been obscured by the name of its parameter

Mastering the art of maximizing efficiency with the Jquery Chosen Plugin

Error: Unable to set attribute because the property is undefined in the onLoad function

Utilizing a variety of textures across various surfaces of a single geometry

Issue with jQuery's JSON data not being properly transmitted to CodeIgniter (`

Adding property to an object retrieved from an API in a React application can be achieved effortlessly by utilizing the useState

The function 'compilation.emitAsset' is not recognized by the sitemap-webpack-plugin

Personalized AngularJS Filter that operates according to a boolean value

Achieving error handling in PHP API using Phalcon framework

Tips on incorporating a high-quality animated gif for optimal user engagement

Are you experiencing issues with the cross-origin request failing in react-map-gl?

Disable Autocomplete Chip functionality when only one can be selected

The challenge of incorporating Laravel, Vue, and JavaScript into a Blade template