Displaying items using a filter function in ng-repeat

I am facing an issue with using a filter on my ng-repeat that involves a function with a parameter passed in, but for some reason, the filter is not working as expected.

The function I am using for the filter compares two arrays to find any matching elements and then returns true or false based on the comparison.

$scope.ifinfav1 = function(f){
  return e.indexOf(f) !== -1;
};

Below is the HTML code where the filter is being implemented.

<ion-view view-title="Favourites">
    <ion-content>
        <ion-list>
        <ion-item id="fav" class="item-icon-right" collection-repeat="office in offices|filter:ifinfav1(office.id)" ng-controller="ModalCtrl" ng-click="openModal(office.id); lastview(office.id);">
            <p>{{office.id}}</p>
            <p id="details">{{office.LocAddressLine1 + ", " + office.LocAddressLine2 + ", " + office.LocCity + ", " + office.LocCountryDescription + ", " + office.LocZipPostalCode}}</p>
            <i ng-class="{'icon ion-android-star': liked(office.id), 'icon ion-android-star-outline': liked(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
        </ion-item>
        </ion-list>
    </ion-content>
</ion-view>
javascriptangularjsionic-framework

Answer â„–1

It's important to note that when using a function as a predicate for a filter, you cannot manually specify the arguments that will be passed to it.

<p ng-repeat="office in offices | filter:isInFavourites(offices.id)">

Instead, you can only designate the function itself without specifying the arguments that will be used when the function is called:

<p ng-repeat="office in offices | filter:isInFavourites">

According to the AngularJS documentation for filter (link), the function will be invoked for each element in the array, receiving the element, its index, and the entire array as arguments.

For your function, focus on working with the element itself, which is the first argument passed to the function. Ensure that your function operates on the office objects rather than their ids.

For example, a function like this could be effective:

$scope.ifinfav1 = function(office){
  return e.indexOf(office.id) !== -1;
};

Implementing a function like this can greatly improve your filtering process.

Check out this JSFiddle example with sample data to see this suggestion in action.

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

"Troubleshooting: Angular ng-show not triggering correctly upon first loading of the

Utilizing Angular's ng-show directive to adjust the display of questions in a quiz and show a result upon completion, everything is functioning as intended except for the initial question. Upon loading the quiz, $scope.image is initialized as false. S ...

javascriptangularjsng-show

Is it possible in Javascript to show identical content every time a checkbox is clicked?

I'm facing an issue with multiple checkboxes where I want them to display the same content when clicked. Currently, when I click on one checkbox, the content appears but remains hidden until I uncheck it, preventing the next checkbox from displaying t ...

javascript

Having trouble with the Typeahead feature in your AngularJs application?

Currently, I am experiencing an issue with my typeahead feature. Regardless of what I type, all suggestions are appearing without any filtering taking place. My intention is to have the suggestions filtered based on the initial letter typed by the user (fo ...

angularjstypeahead

Having trouble with the "initSdk" property being undefined in your React Native Appsflyer integration?

I'm currently facing an issue while trying to integrate AppsFlyer into a react native application. The error I am encountering is "Cannot read property 'initSdk' of undefined" Initially, I imported the react-native-appsflyer module as shown ...

javascriptreactjsreact-nativeappsflyer

PHP: Communicating Data with JavaScript

What if my PHP script requires some time to complete its operations? How can I keep the client updated on the progress of the operation, such as during a file download where the estimated time and data size need to be communicated? In PHP, calculating all ...

javascriptphpajaxcometdhtml

The selector-triggered JQuery event being invoked by my script

Facing an issue while trying to invoke my jQuery event. I am working with 2 jQuery events: $element.on('click', function (e) { ... }); $element.on('click', '.toggle', function (e) { ... }); My question is how can I trigge ...

javascriptjquery

`Is it necessary to handle textStatus when encountering an HTTP error during an AJAX request?`

When utilizing jQuery and encountering an AJAX request failure attributed to an HTTP error (e.g., 500 Internal Server Error), what exactly is the assigned value of the textStatus parameter within the error handler function? For instance, $.ajax(...).fail( ...

javascriptjqueryajax

JavaScript can be used to activate the onclick event

Is there a way to disable and then re-enable all buttons that share the same class name? I attempted the following code without success: let buttons = document.getElementsByClassName("btn-st"); for (let i = 0; i < buttons.length; i++) { b ...

javascript

Utilizing Soundcloud API Authentication in Angular.js: A Step-by-Step Guide

I've been able to successfully use the public Soundcloud API, but I'm struggling with implementing the callback.html in order to display the login dialog. For my App on Soundcloud, the callback redirect uri is set to: http://localhost:8080/#/cal ...

javascriptangularjssoundcloud

Incorporating Angular module into the mean.io bundle

Need help with adding the angular-ui-grid module to a mean.io package: $ cd packages/custom/mypackage $ npm install angular-ui-grid --save To import the JS, add this line to packages/custom/mypackage/public/index.js: import 'angular-ui-grid'; ...

javascriptcssangularjsnode.jsmean.io

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

Can you please share your methods for fetching and caching paginated collections, particularly within the context of Angular or Restangular?

In an app that retrieves data from a REST api with paginated collections of potentially infinite size, how can we effectively handle fetching, caching, and invalidating this data? Imagine the API endpoint is: GET /users?page=1&per_page=50 The respon ...

angularjsapirestcachingrestangular

Determining if a swf file has loaded using JavaScript and swfobject

Here is the code snippet I am working with: <head> # load js <script> function graph() { swfobject.embedSWF( "open-flash-chart.swf", "chart", "400", "180", "9.0.0", "expressInstall.swf", {"data-file":"{% url moni ...

javascriptswfobject

What steps should be taken to activate eslint caching?

I'm attempting to activate eslint caching by following the instructions in this section of the user guide The command I am using is npm run lint -- --cache=true, and the lint script simply executes a script that spawns esw (which itself runs eslint â ...

javascriptnpmcachingeslint

Many inhabitants - utilizing mongoosejs

Just a simple question, for example with a double reference in the model. Schema / Model var OrderSchema = new Schema({ user: { type : Schema.Types.ObjectId, ref : 'User', required: true }, meal: { ...

javascriptnode.jsmongodbmongoose

Difficulty encountered in displaying HTML within a React component

Struggling to display HTML in my React code, whenever I click 'signup' after starting the page, it shows the 'login' view instead. Could there be an issue with how I'm linking everything together? App.js class App extends Compon ...

javascriptreactjsrender

Ensure the validation of numerous input fields within a single form with the use of Vue 3 composition API

Within my application, I have implemented custom validation and validators to ensure the accuracy of various form fields. The submit button functionality is designed to remain disabled until all input fields are filled. The creation of validators involves ...

javascriptformsvue.jsvuejs3

Error encountered while using the Fetch API: SyntaxError - the JSON data contains an unexpected character at the beginning

I've been troubleshooting a contact form and there seems to be an error causing it to malfunction. It's strange because when I switch from Fetch to XMLHttpRequest, the code works fine. With Fetch, if I don't request a response, no errors ar ...

javascriptreactjsfetchphpmailer

Retrieving the value of the selected item when it is changed

I am currently using v-select/v-autocomplete in my project: <v-autocomplete v-modal="newRole" :items="roles" label="--Change role--" required return-object item-value="id" item-text=&qu ...

javascriptvue.jsvuetify.jsdropdown

What is the reason behind the android code being incompatible with IOS operating systems?

I'm encountering an issue where a particular code is working on Android, but not on IOS. The code in question involves using JavaScript to differentiate the items in a list within an HTML select tag. It's perplexing to me how the code can operat ...

javascriptandroidhtmlios