Reverse a filter within an ng-repeat loop - AngularJS

I have a question that I haven't found the answer to yet. Here is the issue I'm facing:

The JSON data I am working with has this structure:

[{
  "batch_queue_name": "Batch One",
  "start_date": "12/01/2016 10:18 P.M.",
  "end_date": "12/03/2016 01:08 A.M.",
  "completion_status": "100"
}, {
  "batch_queue_name": "Batch Two",
  "start_date": "12/10/2016 12:18 A.M.",
  "end_date": "12/11/2016 05:23 P.M.",
  "completion_status": "100"
}, {
  "batch_queue_name": "Batch Three",
  "start_date": "04/01/2017 12:18 A.M.",
  "end_date": "06/01/2017 03:21 P.M.",
  "completion_status": "60"
}, {
  "batch_queue_name": "Batch Four",
  "start_date": "05/01/2017 01:25 A.M.",
  "end_date": "06/01/2017 12:30 A.M.",
  "completion_status": "97"
}, {
  "batch_queue_name": "Batch Five",
  "start_date": "05/01/2017 12:18 A.M.",
  "end_date": "08/01/2017 03:37 A.M.",
  "completion_status": "42"
}, {
  "batch_queue_name": "Batch Six",
  "start_date": "16/10/2016 12:18 A.M.",
  "end_date": "18/10/2016 05:23 P.M.",
  "completion_status": "100"

}]

When using ng-repeat, I want to filter out those entries where the completion status is not equal to 100:

<tr ng-repeat="batch in vm.batches | filter: {batch.completion_status:'!'+'100'}">
     <td> ... </td>
 </tr>

However, I encountered an error message:

Syntax Error: Token '.' is unexpected, expecting [:] at column 28 of the expression [vm.batches |NaNilter: {batch.completion_status != '100%'}] starting at [.completion_status != '100%'}].

Can someone help me understand what mistake I am making here?

javascriptangularjsangular-filters

Answer №1

No need to type out batch.completion_status. Instead, you can achieve the same result with the following code:

ng-repeat="batch in batches | filter: {completion_status: '!100'}"

Check out the Demo on JSFiddle

Answer №2

batch.completion_status is optional. Simply enter:

<tr ng-repeat="batch in vm.batches | filter : {completion_status:'!'+'100'}">
  </tr>

Answer №3

An alternative approach to controller logic is showcased here:

 $scope.filterRange = function(item) {
    return item.completion_status !== 100;
 };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Conceal the parent div from its sibling within the same parent container

My goal is to conceal a parent component from its child element. I attempted to achieve this by using the parent component as a background while adding additional backgrounds to the child elements for overriding purposes. However, this method did not work ...

javascriptcssreactjsnext.jsfrontend

Using Vue Router to set a variable as a key for an object in JavaScript

In my current project, I am attempting to pass a variable as the parameter to vue-router in order to dynamically set it. The code snippet below demonstrates what I am trying to achieve: <router-link :to="{ name: notification.name, (notification.pa ...

javascriptvue.js

Angular: attaching an identification number to an API endpoint

I encountered a problem that has left me puzzled: I am attempting to remove a row from a table by passing the ID of that row (known as the record) through the path of my API. However, for some reason it is not being recognized. Strangely enough, when I sub ...

angularjs

Dealing with timeout errors when using Puppeteer's page.waitForNavigation()

When using puppeteer, I initiate a page by entering a value and it displays the resulting output. await page.click('button[class="button form-button rs-gcbalance-btn"]') await page.waitForSelector('div[class="small-4 large-4 rs-gcbalance-r ...

javascriptnode.jspuppeteer

Click the submit button to display a div element without having to refresh the page

Is it possible to display a spinner for a couple of seconds before the page reloads upon submitting a form? <form class="ready" action="https://link.com" method="post"> <input name="test" type="submit" class="click" value="order"/> </form&g ...

javascriptjqueryformssubmitspinner

How can I change the background color when I click on an object?

HTML <ul class="ul_nav"> <li ng-class="class" ng-click="changeClass()">Marketing</li> <li ng-class="class" ng-click="changeClass()">Sells Team Nestle</li> <li ng-class="class" ng-click="changeClass()">Marke ...

angularjsangularjs-directiveangularjs-scope

I am facing an issue in my Nextjs project where the Array Object is not being properly displayed

Hi there! I am new to Nextjs and currently learning. I recently created a component called TeamCard which takes imgSrc, altText, title, designation, and socialProfile as parameters. However, when attempting to display the socialProfile object array using m ...

javascriptreactjsreact-nativereact-reduxnext.js

The jQuery hover function is not functioning properly on page load in Firefox

While this code is functioning smoothly in Chrome and IE, it seems to be encountering issues in Firefox! <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> JS: $(window).load(function(){ $("#bosti ...

javascriptjquerycss

What is the optimal method for transmitting both an image and JSON data to my express server?

Hey there! So I've set up a MongoDB database and I'm using Mongoose to work with it. Here's the model I have for my product: const productSchema = new Schema({ name: { type: String, required: true}, description: { type: String, required ...

javascriptreactjsmongodbexpressmongoose

Add more JSON entries to the data submission in Express

Purpose: My goal is to ensure that the JSON data I submit is formatted correctly when it arrives in the JSON file, regardless of the number of entries I submit. Challenge: Currently, the data I submit does not append properly in the JSON file. It appear ...

javascriptnode.jsjsonexpressoop

What is the best way to hide the jQuery modal I created?

Hello everyone! Currently, I am working on coding a simple JS modal that can be opened and closed smoothly. The issue I am facing is related to adding a click function to (.black-overlay) in order to fade out everything and close the modal. <div class ...

javascriptjqueryhtmlcsszurb-foundation

Challenge with Merging Bootstrap Clean Blog Template with React Application

I am facing difficulties while trying to merge the Bootstrap Clean Blog Template (Link Attached) into my React App. This template is available for free. After downloading the template, I created a new react project and moved all static assets & files ...

javascriptreactjstwitter-bootstrapreact-hooks

When a page with parameters is reloaded, React fails to initiate

I'm encountering an issue with my application in development mode on localhost. When I try to reload the app on a route with parameters, for example: localhost:8080/item/2 React fails to initialize and only a blank page is displayed. However, if I ...

javascriptreactjsreact-router

Automatically activate a button when it comes into view while scrolling

I am currently working in Joomla, which makes it challenging to create a fiddle, but here is the concept: My website displays a mosaic grid of 12 articles upon loading, along with a 'Load More' button. When this button is clicked, an additional ...

javascriptjqueryhtml

The function this.someFunction does not exist

Even though I have gone through the details of the bind requirement for methods to be associated with a React ES6 class, I am still facing challenges with this specific example: class ProductList extends React.Component { constructor(props) { super( ...

javascriptreactjsthis

Revamp the current webpage to display attribute values in textual format

As I peruse a webpage, I notice that there is room for improvement in terms of user-friendliness. The page is filled with a list of movie titles, each accompanied by a link to IMDb. However, the IMDB user rating is only visible when hovering over the titl ...

javascripthtmlcssattributesstylebot

Identifying on-the-fly adjustments in form input

I am facing an issue where I want to trigger an action when the inputs in my dynamically added form are changed, but unfortunately, it is not working as expected. The HTML code for embedding my form via iframe is shown below: <iframe onload="javascript ...

javascriptjqueryhtmleventsonchange

Ways to modify client socket from JavaScript to PHP

Looking for a way to convert a client socket from JavaScript to PHP in order to receive data from the server socket? Check out the PHP socket Bloatless library here. This is an example of the Client Javascript code: <script> // connect to chat appl ...

javascriptphpwebsocket

Customizing Header Design and securely passing authentication details?

As a newcomer to angular.js, I am attempting to include a custom header in a request. I have a function that is supposed to fetch a response from the service. function getInsuredWebAccount(insuredId) { }; var deferred = $q.defer(); ...

angularjs

Show or hide the right element when clicked using ng-show in AngularJS

My goal is to toggle elements based on which one is clicked, not all at once. For instance, if I have 3 form elements and 3 buttons, when I click on button 1, I only want to toggle the corresponding form element. Here is my current code snippet: In Angu ...

javascriptjqueryhtmlangularjs