Unable to access filteredItems from custom popup in uib-typeahead retrieval process

Issue with Retrieving Filtered Items from ng-repeat in Controller using $scope

Despite trying to fetch filtered items from ng-repeat, the value of $scope.filteredItems appears as undefined when I log it to the console. I attempted to implement the solution suggested in this Stack Overflow thread, but unfortunately, it did not resolve the issue.

The ng-repeat is nested within a custom popup template for the uib-typeahead dropdown. My objective is to access the filtered value in the parent controller.

example-input.component.ts

/////////////////////////////////
componentController.$inject = ['$scope', 'exampleDataService'];
function componentController($scope, exampleDataService) {

    var someInput = this;
    someInput.typedText = '';
    someInput.onKeyPress = onKeyPress;
    return;

    /////////////////////////////////
    //controller implementation detail
    /////////////////////////////////

    function onKeyPress(){
        console.log($scope.filteredItems); // displays 'undefined'
    }
}

UIB-Typeahead Custom Template for Popup

<script type="text/ng-template" id="input-custom-template.html">
    <ul class='dropdown-menu' ng-show='isOpen() && !moveInProgress'
        ng-style="{top: position().top+'px', left: position().left+'px'}"
        role='listbox' aria-hidden='{{!isOpen()}}' match-limit  in-view-container> 
        <li style="max-height:0;overflow:hidden"><span in-view="$inview && matchLimit.reset()"> </span></li>
        <li ng-repeat='match in (filteredItems = (matches | someMatchSort:query | limitTo:matchLimit.value)) track by some.model.example '
            ng-class='{active: isActive($index) }'
            ng-mouseenter='selectActive($index)'
            ng-click='selectMatch($index, $event)'
            role='option' id='{{::match.id}}'
            in-view="!$inview && isActive($index) && scrollTarget.scrollIntoView()" 
            scroll-target
            >
            <div uib-typeahead-match index='$index' match='match'
                 query='query' template-url='templateUrl'>
            </div>
        </li>

    </ul>
</script>
<input type="text" ng-model="someInput.typedText" typeahead-min-length="1"
       uib-typeahead="option.example as option.value for option in someInput.options | filter:{value:$viewValue}"
       class="form-control input-text-example icon-search"
       placeholder="example"
       typeahead-popup-template-url="input-custom-template.html"
       ng-keypress="someInput.onKeyPress()"/>

If more information is required, please do not hesitate to ask. Additionally, there is a filter named someMatchSort.filter.ts, and while I am uncertain of its significance here, kindly let me know if it needs to be included. I will update my inquiry accordingly.

Answer №1

If your situation calls for it, consider utilizing ng-keyup. Then, within your component, implement the following:

function checkKeypress(){
     console.log($scope.$$childHead.matches.length);
}

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

Menu with dropdown navigation

Looking to create a dynamic and responsive navbar menu with items and subitems on my website. Bootstrap has proven to be challenging when adding submenus. Are there any tools, frameworks, codes or plugins that could assist me in achieving this? It's ...

Creating an MPG4 Video from a Three.js Scene: What Are the Steps?

I am working with a three.js scene that includes numerous animated objects. I am looking to export this animation as an mpg4 video. Here are my questions: What is the best method for exporting a scene to create an mpg4 video? Is it recommended to perfo ...

Including a personalized User-Agent string in my headers for fetch requests

Currently, I am utilizing the fetch API within my React project to retrieve data from a JSON endpoint. One requirement I have is to include a custom User-Agent string in my requests. Upon inspecting my requests, I noticed that the UA string displays as: ...

Managing Dark Mode in Material UI with Redux

Having a React application integrated with Material UI, I encountered an issue with the dark mode functionality. Whenever I attempt to modify the dark mode state on a page where the content is rendered from redux state data, the entire page crashes. It app ...

What are the steps for implementing CORS?

I recently attempted to set up Ajax calls and stumbled upon the following code snippet: <!DOCTYPE html> <html> <body> <p id="demo">Let AJAX update this text.</p> <button type="button" onclick="loadDoc()">Updat ...

Chrome fails to read font family correctly

I created a jsfiddle that demonstrates an interesting behavior with setting and reading the font-family using jQuery. When I set the font-family to "Arial . . ." it reads back okay, enclosed in a single set of double quotes. However, when I set the font-fa ...

What is the best way to match the minimum height of one div to the height of another div?

I need to dynamically set the minimum height of #wrapper equal to the height of #sidebar, but the height of #sidebar is not fixed. Here is my attempt at achieving this with JavaScript: var sidebarHeight = jQuery('#sidebar').height; jQuery(&apos ...

Is it possible to blend HTML and Jade routes in a single project?

I am interested in setting up an application where I can incorporate a mix of both HTML and Jade. While I don't have anything against Jade, I prefer working with HTML for building applications involving Angular and Node APIs. As I am currently learnin ...

Retrieving text that has been HTML-escaped from a textarea using jQuery

Within my HTML file, I have a <textarea id="mytextarea"></textarea>. Suppose a user inputs the following text: <hello>, world! How can I retrieve res = "&lt;hello&gt;, world!"; based on the user's input? The current code s ...

How to Utilize Vue and Checkboxes for Filtering a List?

My current challenge involves filtering a list of posts based on userId using checkboxes. The data is being retrieved from: https://jsonplaceholder.typicode.com/posts. I aim to include checkboxes that, when selected, will filter the list by userId. Here is ...

Encountering a 400 error while trying to implement file upload feature in Spring AngularJS -

Whenever I attempt to upload a file using Spring and AngularJS, I keep encountering the dreaded 400 Bad Request error: > error: "Bad Request" > exception: "org.springframework.web.multipart.support.MissingServletRequestPartException" > message: " ...

Understanding the reading of Java Class List in Vue Js

As a beginner in Front-end development, I am trying to figure out how I can use Vue.js to read a Java class List. Specifically, I have a Java class that includes a list of fruits and I want to be able to display this list on the UI using Vue.js: public c ...

Unable to retrieve the value of a specific property using _.map based on its property name

I'm currently facing a challenge with my app that utilizes MongoDB as its database. Specifically, I am having trouble extracting property values from array variables. Despite using a _.forEach method to confirm the presence of data, I encountered diff ...

An Alternative Approach for Executing a Function within an AngularJS Directive

I am currently working on a unique element directive that displays a user's picture and name. This directive has various configuration attributes, one of which is the uc-on-hover attribute. The purpose of this attribute is to determine what element sh ...

What is the best way to save data in order to effectively showcase a collection of images that together form a single entity in a game

Apologies for the unclear title, I struggled to find the right words. Recently, I delved into the world of 2D game development and was amazed by the capabilities of HTML5's Canvas element. Currently, I am working on my first basic project to grasp th ...

What is the process for triggering data-dismiss after the href has been activated?

Could someone help me with this issue? <a class='btn btn-danger' href='page.html'>Delete</a> I am trying to activate the "data-dismiss" attribute after the "href" is activated. My initial attempt was using this code: < ...

Using a jQuery dialog to launch a popup window specifically optimized for Safari browsers

I recently encountered an issue with my plain JavaScript function that opens a pop-up window. It functions perfectly in Chrome and Firefox, but I faced difficulty in Safari due to the default popup blocker preventing the page from opening without any err ...

Clear previously filtered items

I am currently working on implementing a search functionality using Javascript for my project, but I've hit a snag. After hiding certain items, I'm having trouble making them appear again. JSFiddle The code I have so far is as follows: $(' ...

Transforming a group of JSON objects into a two-dimensional array

Below is an array of JSON objects: var data = [{ 1: { name: 'Name 1', id: 'one' } }, { 2: { name: 'Name 2', id: 'two' } }]; I want to transform this into a 2-D array like this: var newData ...

show a notification once the maximum number of checkboxes has been selected

I came across this code snippet from a previous question and I'm interested in making some modifications to it so that a message can be displayed after the limit is reached. Would adding a slideToggle to the .checkboxmsg within the function be the mos ...