Refining an ng-repeat by multiple distinct values

When attempting to filter an ng-repeat using two columns of the data, I encountered an issue.

Data

  • name (string)
  • address = [{city (string)}] (array)

HTML

<input type="text" class="search-query" ng-model="search.attributes.name" />
<select ui-select2 id="select2" data-placeholder="Type" ng-model="search.attributes.address.0.city" class="form-control">
        <option value=""></option>
        <option ng-repeat="type in types" value="{{type}}">{{type}}</option>
</select>

<tr ng-repeat="resource in resources | filter:search | limitTo: 10">

Strangely, none of the data appears when this setup is used. If I remove the select box completely, all data is displayed. However, once I input something in the search box, it seems like the filter removes everything from view.

Answer №1

Upon inspection, it appears that the variable search.attributes.name was not initialized as an empty string ('') but rather as undefined. This caused the filter to not default to allowing any value, but instead defaulted to only allowing values that were undefined.

To solve this issue, I needed to make the following adjustments in my controller:

$scope.search = {};
$scope.attributes.name = '';
$scope.attributes.address.0.city = '';

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

Learn how to fetch data using JavaScript and store it in an array, then display the data in a Bootstrap card using inner

I am working with a Fetch method that looks like this: async function sendApiRequest() { let APP_ID = "f61bb958"; let APP_Key = "7c465e19d8e2cb3bc8f79e7a6e18961e" let INPUT_VALUE = document.getElementById("inputRecipe&q ...

What is the best way to access the validation group in a javascript event?

Recently, I've been grappling with a challenge involving a button that has a validation group. The quirk is that the button click event triggers a jQuery function without using onclientclick. As I navigate through this dilemma, one burning question re ...

Calculate the sum of object values in JavaScript when all other values in the object are identical

Recently, I've been delving into JS high array methods and encountered an array of objects featuring cost categories and values: [{category: "Bars", amount: 31231}, {category: "Transport", amount: 1297}, {category: "Utilities", amount: 12300}, {categ ...

Exploring Angular directive scope: comparing template include to inline transclude

I have developed an angular directive that is used to display a modal window. This directive has the ability to accept contents either inline between the HTML tags or by pointing to a template. Strangely, I have noticed that when utilizing the transcluded ...

What is the reason behind the availability of the C# and ECMAScript ISO standards for free, while C/C++ standards are not

As someone deeply interested in the ISO C and C++ standards, I am intrigued by the fact that programming language standards for ISO/IEC 23270:2006 C# and ISO/IEC 16262:2011 ECMAScript can be accessed publicly on the ISO website. Meanwhile, standards for C ...

Unable to activate the HTML anchor tag to initiate file download on Android devices

First, I am in the process of creating a mobile application using Visual Studio 2013 to retrieve a file from a local server. The code I am currently using to download a file works perfectly fine when clicking on pages, however it does not work when attemp ...

After an ajax request is made, utilize a unique jQuery plugin for custom content

After browsing through numerous questions related to this topic, I realized that there are few satisfactory answers available. One suggestion was to use advanced:{ updateOnContentResize: true }, but unfortunately it did not yield the desired results when ...

Could someone please clarify the workings of the JS script below for me?

I need help understanding a script I found. Everything seems to work properly, but there's one section that puzzles me: Math.floor(Math.random() * 101). Can someone please explain how this entire script functions? Thank you. <SCRIPT LANGUAGE="Java ...

Oops! Looks like there's an issue with trying to access the 'regenerate' property of an undefined object

I'm currently learning about node.js and attempting to utilize 'express-session' for session creation and storage. I am encountering a bug with the title, and below is the code I have written. After reviewing the original code on GitHub, I w ...

A different way to add a child element in JavaScript without using

Is there a way to insert a node as a child element at position 0, replacing any existing child nodes rather than appending? What function can I use to ensure cross-browser compatibility for this operation? ...

One click wonder: Easily print any webpage content with just the click of a button!

For example, upon clicking the button on my webpage, I want the content of another page to be sent directly to a printer. The objective is to bypass the print dialog box and print preview that typically appears when using the browser's default printin ...

What's causing the browser to repeatedly display a "cannot get" message?

I've been working on a project utilizing node js and express. Despite fixing some errors, I still encounter a "cannot get" error when executing the code in the browser. The terminal confirms that the Express server has started at port : 3000 and the M ...

Iterate through the input values using a for loop and output the value of each individual input

I am working on an express app where I need to loop through data in my EJS file to create 5 hidden input fields, each with a unique value. However, I am struggling to extract the values of these inputs using JavaScript. Despite trying multiple methods, I ...

Implementing class changes based on scroll events in JavaScript

const scrollList = document.getElementsByClassName('scrollList'); function scrollLeft() { scrollList.scrollLeft -= 50 } function scrollRight() { scrollList.scrollLeft += 50 } #scrollList { display: flex; overflow: auto; width: 10 ...

HTML5 - Video playback with consistent speed and no lag

What I am looking for I am in need of a script, preferably in Javascript or jQuery, that can rewind a video when clicked. The current script we are using rewinds the video with acceleration, resulting in a jarring playback experience. I require the video ...

Angular throwing unrecognized module error with Node.js and MongoDB

Working on a MEAN-stack project and encountering issues with data-binding. The module responsible for connecting the View to the Backend is not getting instantiated, resulting in an error message in the console: [$injector:modulerr] Failed to instantiate ...

Discover the magic of Google Charts with the ability to showcase HTML source code within tooltips

I am attempting to show a Pie Chart using Google Charts with HTML in the tooltips, but I am encountering an issue where the HTML source is visible. I have tried setting html:true on the data column and tooltip.isHtml in the options, but I am unsure of what ...

Exploring CSS animations by utilizing the transform and color properties

I am currently working on a project that involves animating text (specifically "happy birthday to you") and a heart. The idea is for the heart to drop and hit each word one by one, turning them yellow upon impact. Once the last word is hit, the text shou ...

Exploring the interception of ajax http responses beyond the scope of AngularJS

Is there a way to capture and manage http responses from outside of Angular? $httpProvider is not an option since the target script loads after Angular has initialized. I need a solution that functions similar to ajaxSuccess in jQuery. ...

Adjust element sizes in real time with Angular 5

In my current setup, I have 2 interconnected div elements. The left div contains a list of images while the right div displays the details of each image. By clicking on an image in the left div, the right div expands and shows the corresponding information ...