AngularJS ng-repeat specific filter conditions

Below is the code that I currently have:

<div data-ng-if="hasSelectedCompany">
   <tbody data-ng-repeat="driver in result.applications | filter: { name: selectedApplication } track by $index">
</div>
<div data-ng-if="hasSelectedSupportedCompany">
   <tbody data-ng-repeat="driver in result.applications | filter: { name: selectedSupportedApplication } track by $index">
</div>

I am aware that there may be a better way to write this code, as it is not functioning correctly at the moment. The first condition does not work properly when both conditions are present. However, if I remove the second condition entirely, the first one works. Interestingly, the second condition works fine even with both of them included.

Could someone suggest an alternative approach to achieve the desired outcome?

Thank you in advance!

javascriptangularjsangularjs-ng-repeatangularjs-filter

Answer №1

It is not possible for both filters to work simultaneously as they are both targeting the same result.applications.

To make it work, you must segregate the filtered arrays by assigning them to different variables such as applicationsForCompany for the hasSelectedCompany section and applicationsForSupportedCompany for the hasSelectedSupportedCompany section.

Code Example

<div data-ng-if="hasSelectedCompany">
   <tbody data-ng-repeat="driver in applicationsForCompany = (result.applications | filter: { name: selectedApplication }) track by $index">
</div>
<div data-ng-if="hasSelectedSupportedCompany">
   <tbody data-ng-repeat="driver in applicationsForSupportedCompany =  (result.applications | filter: { name: selectedSupportedApplication }) track by $index">
</div>

Answer №2

<html ng-app="app">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.angularjs.org/1.4.0/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl">
    <input type="text" ng-model="search">
    <input type="text" ng-model="search1">
    <div ng-repeat="d in data|filter:{name:search}">{{d.name}}</div>
    <div ng-repeat="d in data|filter:{name:search1}">{{d.name}}</div>
  </body>

</html>

angular.module('app',[]).controller('mainCtrl',['$scope',function($scope){
  $scope.data = [{id:1,name:'cata',surname:'obreja'},{id:2,name:'dani',surname:'popa'},{id:3,name:'Sir',surname:'dani'}];
}]);

There's a functional example linked above, though I'm uncertain if it perfectly fits your needs at the moment. You can take a look at the plnkr here: http://plnkr.co/edit/W7ZofMcZMKTfw3BUB4jX?p=preview

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

Error 7: On loading the application, jQuery Data Table encountered a 404 error

I encountered a unique issue while working on my application. Recently, I introduced a new section to the app and decided to utilize jQuery Data Table for displaying results. Upon loading the app, an alert error message regarding my table popped up: D ...

javascriptjqueryajaxspring

Implement the map function to validate every input and generate a border around inputs that are deemed invalid or empty upon button click

Currently, I'm in the process of developing a form with multiple steps. At each step, when the next button is clicked, I need to validate the active step page using the map function. My goal is to utilize the map function to validate every input and ...

javascripthtmljquerymap-function

The type 'ReadableStream<any>' cannot be assigned to the parameter type 'ReadableStream'

Is there a way to convert a Blob into a Readable format? import {Readable} from 'stream'; const data: Blob = new Blob( ); const myReadable: Readable = (new Readable()).wrap(data.stream()); myReadable.pipe(ext); Encountering an error: ERROR in s ...

javascriptnode.jstypescriptstream

"Protractor: The Ultimate Tool for Testing Angular and Non-Angular

Entering the world of Protractor for the first time, I find myself tasked with testing both Angular and Non-Angular applications. My testing sequence will go as follows: Testing the Non-Angular login page After successfully logging in, testing the Angul ...

angularjsprotractor

Converting a text area into a file and saving it as a draft in the cloud with the

Can content from a text area be converted into a file of any chosen format and saved in the cloud? Additionally, should every modification made in the text area automatically update the corresponding file stored in the cloud? ...

javascriptphphtmljsoncloud

Combining an Image with a CanvasJS Graph and Generating a Downloadable Image of the Composite

I am attempting to combine an image (a background image for my graph) with my canvasJS chart. Once these elements have been merged on a canvas, I aim to obtain a DataURL of this canvas, enabling me to download an image of it (depicting the graph along wit ...

javascriptjqueryhtmlimagecanvas

Input the date manually using the keyboard

I am currently utilizing the rc calendar package available at https://www.npmjs.com/package/rc-calendar When attempting to change the year from 2019 to 2018 by removing the "9," it works as expected. However, when trying to delete the entire date of 1/15/2 ...

javascripthtmlreactjsreduxmaterial-ui

Waiting for asynchronous subscriptions with RxJS Subjects in TypeScript is essential for handling data streams efficiently

Imagine having two completely separate sections of code in two unrelated classes that are both listening to the same Observable from a service class. class MyService { private readonly subject = new Subject<any>(); public observe(): Observable&l ...

javascripttypescriptasynchronousrxjsrxjs-observables

Ensure that the objection model aligns with the TypeScript interface requirements

I am currently working on implementing an API using express, objection.js, and TypeScript. I found a lot of inspiration from this repository: https://github.com/HappyZombies/brackette-alpha/tree/master/server/src Similar to the creator, I aim to have var ...

javascripttypescriptknex.jsobjection.js

Using PHP and jQuery to output content in HTML

I am facing an issue with displaying HTML content fetched from a database using the following code: $("#menuOverlay").append('<?php include('aggiungiPaginaComp.php');?>'); Although the code is functioning properly, when I view t ...

javascriptphpjqueryhtml

Measuring Time Passed with JavaScript

I've been working on a small piece of code that needs to achieve three tasks: User should input their birthday User must be able to view the current date When the user clicks a button, they should see the time elapsed between their birthday and the ...

javascripthtml

Conceal the vacant area located at the top of the page

By clicking on the "Run code Snippet" button or visiting this link, you may notice a significant amount of empty space at the beginning of the page. The images only become visible once you start scrolling down. I am looking for a solution to hide this emp ...

javascripthtmlcss

The execution of Javascript should be limited to when the tab or browser window is in focus

Similar Question: Detect If Browser Tab Has Focus I have developed a basic Java applet that is capable of capturing a client's screen. By using a small piece of JavaScript code, I can initiate the applet and capture the active screen image. Howe ...

javascriptjqueryhtml

Passing parameters to functions without using parentheses in JavaScript

One of the functions in my code is named "tryMe", and I want to call it without using parentheses. For example: setTimeout(tryMe,200); How can I pass any necessary parameters in this situation? I am currently using a jQuery plugin that allows me to call ...

javascriptjqueryparameter-passing

My JavaScript code runs perfectly fine on JSFiddle, but for some reason, it's not functioning correctly on

I need a solution where a new button is generated every time the post button is clicked, and each of these buttons should have its own counter. This works successfully in JSFiddle, but unfortunately doesn't work when I try to implement it elsewhere. ...

javascriptjquerycsshtml

Share user group Node Express with relevant data

I am looking for a way to create and send a customized navigation object to be rendered in an Express application based on user groups. My current approach involves adding middleware to each route: var navMiddleware = function() { return function(req, ...

javascriptnode.jsexpresspassport.js

Adjust camera view according to the rotation in three.js

I am in the process of creating a demonstration, and I'm facing an issue with moving the camera in my scene in the direction it is pointing. The concept is similar to pointer lock controls, but I need the camera to have the ability to move up, down, f ...

javascriptthree.js

Is there a way to access and read the console log of a specific website using Python code? I am looking to extract messages such as "ok" and "connected

Seeking guidance on how to interpret console log output for a specific website while automating with Python. Struggling to extract live console data through Selenium, as there's no built-in function for reading logs in real-time. Although I can acces ...

javascriptpythonpython-2.7apiselenium

difficulty in making an https request

My application was developed using OFFICEjs and was functioning properly on LOCALHOST. However, last week it suddenly started throwing an error message - "XHR Error." This issue arose out of nowhere, as I hadn't made any changes to the code over the w ...

javascriptoffice-js

Leverage Express.js route variables for universal access

I'm currently working on integrating the Spotify API with my express.js server and facing a challenge in accessing an Authorization code from a URL parameter. I've managed to retrieve this value using let code = req.query.code within the callback ...

javascriptnode.jsexpressroutesspotify