AngularJS function for comparing operators

Question

AngularJS function for comparing operators

Just starting out with AngularJS and I've been given a small task to solve by my employer. Having some trouble with it, so hoping someone can lend a hand.

The task involves using comparison operators in ng-options along with a number field to filter results from a table of employees. For example, if the user selects 'greater than' in the ng-option and inputs '50' in the text field, the result should display employees whose age is greater than 50 from the data table. Any help would be greatly appreciated!

This is what I've attempted:

$scope.operators = [
            {
                field: "gt"
                title: ">"
                }
                , {
                field: "lt"
                title: "<"
                }
                , {
                field: "et"
                title: "="
                }
             ];
        $scope.selected = $scope.operators[0];
        app.filter('priceGreaterThan', function () {
            return function (input, price) {
                var output = [];
                if (isNaN(price)) {
                    output = input;
                }
                else {
                    angular.forEach(input, function (item) {
                        if (item.redemptions > price) {
                            output.push(item)
                        }
                    });
                }
                return output;
            }
        });

jquery css wordpress

Answer 1

Answer №1

Hey there! Utilize the filter to perform all three operations effortlessly. Take a look at the code snippet below for reference.

Your filter is functioning well. I have enhanced it by adding an if else condition to execute different operations. Additionally, I have included a table to display the output. Instead of solely passing the price to the filter, I am now passing an object (

{price: price, operator: selected.field}

) which the filter uses to retrieve the price and operator. Kindly review my code and inform me if there are any concerns.

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.data = [{
    name: 1,
    redemptions: 100
  }, {
    name: 1,
    redemptions: 150
  }, {
    name: 1,
    redemptions: 200
  }, {
    name: 1,
    redemptions: 50
  }, {
    name: 1,
    redemptions: 1
  }, {
    name: 1,
    redemptions: 10
  }]
  $scope.operators = [{
    field: "gt",
    title: ">"
  }, {
    field: "lt",
    title: "<"
  }, {
    field: "et",
    title: "="
  }];
  $scope.selected = $scope.operators[0];
});

app.filter('priceGreaterThan', function() {
  return function(input, params) {
    var output = [];
    if (isNaN(params.price)) {
      output = input;
    } else {
      angular.forEach(input, function(item) {
        if (params.operator === "gt") {
          if (item.redemptions > params.price) {
            output.push(item);
          }
        } else if (params.operator === "lt") {
          if (item.redemptions < params.price) {
            output.push(item);
          }
        } else {
          if (item.redemptions == params.price) {
            output.push(item);
          }
        }
      });
    }
    return output;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <input type="text" ng-model="price">
  <select name="operator" id="test" ng-model="selected" ng-options="x as x.title for x in operators"></select>
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Redemptions</th>
    </tr>
    <tr ng-repeat="j in data | priceGreaterThan: {price: price, operator: selected.field}">
      <td>{{j.name}}</td>
      <td>{{j.redemptions}}</td>
    </tr>
  </table>
</div>

Answer 2

Hey there! Utilize the filter to perform all three operations effortlessly. Take a look at the code snippet below for reference.

Your filter is functioning well. I have enhanced it by adding an if else condition to execute different operations. Additionally, I have included a table to display the output. Instead of solely passing the price to the filter, I am now passing an object (

{price: price, operator: selected.field}

) which the filter uses to retrieve the price and operator. Kindly review my code and inform me if there are any concerns.

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.data = [{
    name: 1,
    redemptions: 100
  }, {
    name: 1,
    redemptions: 150
  }, {
    name: 1,
    redemptions: 200
  }, {
    name: 1,
    redemptions: 50
  }, {
    name: 1,
    redemptions: 1
  }, {
    name: 1,
    redemptions: 10
  }]
  $scope.operators = [{
    field: "gt",
    title: ">"
  }, {
    field: "lt",
    title: "<"
  }, {
    field: "et",
    title: "="
  }];
  $scope.selected = $scope.operators[0];
});

app.filter('priceGreaterThan', function() {
  return function(input, params) {
    var output = [];
    if (isNaN(params.price)) {
      output = input;
    } else {
      angular.forEach(input, function(item) {
        if (params.operator === "gt") {
          if (item.redemptions > params.price) {
            output.push(item);
          }
        } else if (params.operator === "lt") {
          if (item.redemptions < params.price) {
            output.push(item);
          }
        } else {
          if (item.redemptions == params.price) {
            output.push(item);
          }
        }
      });
    }
    return output;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <input type="text" ng-model="price">
  <select name="operator" id="test" ng-model="selected" ng-options="x as x.title for x in operators"></select>
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Redemptions</th>
    </tr>
    <tr ng-repeat="j in data | priceGreaterThan: {price: price, operator: selected.field}">
      <td>{{j.name}}</td>
      <td>{{j.redemptions}}</td>
    </tr>
  </table>
</div>

AngularJS function for comparing operators

Answer №1

Similar questions

I am facing an issue where the code in the content script is not getting injected when the URL tab changes. Is there a way to resolve this problem?

How to disable scrolling for React components with CSS styling

Determined margin value to replicate the maximum and minimum margin in CSS styling

Laravel is sending out the HTTP header text together with the payload response

When typed into the search bar input box, text becomes reversed

Publish a Reddit comment using programming code

Creating a ToggleButton in C#Is a Togglebutton the

How to prevent Bootstrap Carousel from automatically sliding on mobile devices without using JavaScript

Restricting the movement of the mouse event

Reduce the width beyond the necessary limit

The positioning of the jumbotron image is off-center

Is it possible to rotate an image with a random angle when hovering in Angular?

Enhance user experience with AngularJS Bootstrap autocomplete feature by automatically filling input box when hovering over dropdown options

Responsive Image Resizing with Bootstrap for Smaller Screens

The web page's content remains hidden until it is scrolled into view, despite the fact that the page has finished loading

Is the Bootstrap navigation bar collapse button visible on larger screens?

Problem with Bootstrap5 tooltips

What could be the reason my checkbox won't check using jQuery?

The combination of jQuery and JavaScript targeting the element with the ID '#update1' is essential. Can someone please assist me with

Unable to utilize the rupee font within a select element on Chrome and IE8 browsers