Using Angular's $filter to target a specific field

I'm attempting to use the $filter function in my controller, within a $watch function, to filter specific fields. I am having trouble understanding the documentation provided.

The situation: I have a dropdown menu that serves as the filter parameter. I intend to filter an array called $scope.images based on a particular field named Vessel. When an option is chosen from the dropdown list, the $watch function should filter the array accordingly.

Currently, the code I have filters on all fields rather than just the specified one.

Angular Code:

$scope.$watch('search', function(val)
{ 
    $scope.images = $filter('filter')($scope.items2, val);
}

View

<div ng-app="masterApp" ng-controller="listCtrl">
 <div class="container">  
    <label for="singleSelect"> Select Vessel: </label><br>

    <select name="singleSelect" ng-model="search">
        <option value="African Chaser">African Chaser</option>
        <option value="African Sprinter">African Sprinter</option>
    </select>

    <h3 class="text-center">Time: {{images[slider.value].Created | date:'medium'}}</h3>

    <img src="https://intra.monjasa.com/{{images[slider.value].File.ServerRelativeUrl}}" class="feed_image">

    <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options"></rzslider>
 </div>
</div>

What I have tried:

    $scope.$watch('search', function(val)
{ 
    $scope.images = $filter('filter: Vessel')($scope.items2, val);
}

The above code snippet is not yielding the desired result.

Can anyone provide any insights into where I might be making a mistake?

Answer №1

Hopefully this information proves useful:

 $scope.displayedImages = $filter('filter')($scope.itemsToDisplay,{Category : $scope.searchText},true);

Answer №2

Here is a suggestion for you:

Add the ng-changed event to your dropdown like this -

<select name="singleSelect" ng-model="search" ng-changed="filterItems()">
        <option value="African Chaser">African Chaser</option>
        <option value="African Sprinter">African Sprinter</option>
    </select>

Then, in your controller, create a function called filterItems as shown below

$scope.filterItems = function(){
   // Add your filter logic here
   $scope.images = $filter('filter')($scope.items2,{"vessel" : $scope.search});
}

The property vessel in $scope.items2 will be used for filtering.

We hope this solution proves helpful for you.

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

What should the AJAX file in TagManager jQuery look like?

I'm currently utilizing Tagsmanager with JQuery, which can be found at There is a feature that allows tags to be pushed via Ajax: jQuery(".tm-input").tagsManager({ AjaxPush: '/ajax/countries/push', AjaxPushAllTags: true, ...

Diverse behaviors exhibited by an array of promises

I've developed a function that generates an array of promises: async addDefect(payload) { this.newDefect.setNote(payload.note); this.newDefect.setPriority(payload.priority); const name = await this.storage.get(StorageKeys.NAME); ...

Reading data from a Node PassThrough stream after writing has finished can be achieved by piping the stream

Is it possible to write to a Node Passthrough stream and then read the data at a later time? I am encountering an issue where my code hangs when trying to do this. Below is a simplified example in Typescript: const stream = new PassThrough(); strea ...

After an orientation change event, the window.innerWidth property is behaving unexpectedly in Chrome iOS version 87.0.4280.77

After an orientation change event on Chrome iOS 87.0.4280.77, the window.innerWidth appears to be incorrect. Initially, the innerWidth is 414px when viewed on an iPhone. However, after changing the phone's orientation from landscape to portrait, the i ...

What is the best way to create a taskbar using HTML or Javascript?

I'm currently developing an innovative online operating system and I am in need of a functional taskbar for user convenience. The ideal taskbar would resemble the Windows taskbar, located at the bottom of the screen with various applications easily ac ...

The beta version of Angular 2.0 introduces the BrowserDomAdapter for easy access to the DOM

I have a Component in Angular 2.0 that is attempting to utilize the DOM Adapter API from Angular's BrowserDomAdapter documentation. The initialization of this DomAdapter can be found here. However, I am uncertain about whether the Dom Adapter needs t ...

I am trying to showcase a collection of images on my homepage, but unfortunately, it is not functioning as expected

Does anyone know how to display images using Angular? I am currently utilizing the pic controller in an AngularJS file. Any assistance would be greatly appreciated. HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

"Discover the steps to efficiently utilize the lookup feature with array objects in MongoDB

I am a beginner with MongoDB and I am trying to create a schema for my collection as shown below please note that all ObjectId values are placeholders and not real stockIn documents { serial:"stk0001", date:'2021-06-11', productInTra ...

The JQuery Ajax call returned with a status of 0 and an empty ResponseText

Here is the ajax request I am using: $.ajax({ type: "POST", url: "https://forlineplus.forsa.com.co/projects/validar-redireccion-sio?fup=" + idFup, //contentType: "application/json; charset=utf-8", ...

String values should determine whether a checkbox is checked or not

When retrieving data from LocalStorage, my code looks like this: angular.module('madMeApp').controller('campaignInDetails', function($scope) { var campaignToShow = JSON.parse(localStorage.getItem("CampaignDetails")); $scope.selecte ...

Utilizing ngCookies within an Ionic app

I am having an issue incorporating ngCookies into my project. Despite including the angular cookies library in my index.html file after ionic.bundle, the $cookies service seems to be pointing to an empty object when I try to access its functions in my code ...

Using `require` in place of `script` tags in a three.js file when working with Node.js environment

Instead of using the html script tag, I have implemented javascript require in my three.js file for node.js. Here is a snippet from an html file: <script src="../build/three.js"></script> <script src="js/controls/DragControls.js"></s ...

"The implementation of real-time data retrieval through Socket.io is currently not functioning as expected

As a beginner in mean-stack, I tried to implement real-time data following some instructions but encountered errors. Can someone guide me on how to correctly use socket.io? I have provided my code below for fetching users from mongodb, kindly review and co ...

JavaScript Arrays and Their Mysterious Undefined Elements

Creating a basic HTML document with a JavaScript script can be quite simple. ... <script type = "text/javascript"> src = "xxx.js"></script> ... <body> <ul id ="pics"> <li><a href="A.jpg">A</a></li> ...

What is the process for making an XHR request to a server located remotely

Do you think the code below is sufficient for XHRing a remote server? I tried putting the full server URL in the open method of the XHR object, but it didn't work. I'm not sure if something else needs to be added. <script type="text/javascrip ...

What is the best way to update and add data with just one click using jQuery?

Trying to dynamically add text to textboxes by clicking an "add" button. The code allows for adding/removing textboxes that save values to and delete from a database. Upon page load, a function called showitem creates textboxes dynamically and populates th ...

Obtain a masterpiece by creating a canvas in React

Greetings! I have developed a drawing app using react and I am looking for a way to capture what the user has drawn on the canvas when they release the mouse button. This process should repeat continuously until the user stops drawing. Can anyone suggest h ...

Dynamic Node.js server constantly updating

My goal is to create a dynamic Node.js Express server that updates live, possibly by creating a specific route like /update to load a new configuration file. My concern is that the server could be in any state when the update occurs. It's possible tha ...

The error message from Object.create() indicates that the argument provided is not recognized as

Description Within my project, I am handling a JSON file, parsing it into an object, and attempting to transform it into an instance of the ProjectFile class using Object.create(). Code let tmpFileContent = fs.readFileSync(tmpPath, {encoding: 'utf- ...

The hyperlink functionality is disabled because Javascript is set to return false

JS Fiddle Example When using the 'FOO' and 'BOO' items in the navigation bar to open dropdown boxes, I have implemented a code that closes them when a click event occurs outside. This code has been working fine as shown below: $(docum ...