Implementing custom object property filtering in Angular typeahead

I'm currently working on integrating a versatile typeahead directive. This directive requires a list of options and a configuration object as attributes. Within the configuration object, there is a property called "label" which dictates what the user sees and how their queries are filtered. Unfortunately, I'm facing challenges in utilizing this property within my filter expression, shown as follows:

 uib-typeahead="option as option[config.label] for option in options | filter:{ config[label] :$viewValue }

Upon attempting to implement this, I encounter the following error:

Syntax Error: Token '[' is unexpected, expecting [:] at column 26 of the expression [options | filter:{ config[label] :$viewValue }] starting at [[label] :$viewValue }].

Any assistance would be greatly appreciated!

javascriptangularjsangularjs-directiveangularjs-filterangular-ui-typeahead

Answer №1

ngOptions requires an object as a filter. The code snippet below is attempting to create and pass a dynamically keyed object, which cannot be done inline in its current setup due to invalid Javascript syntax: 

... filter:{ config[label] :$viewValue }

To work around this issue, you can construct the object in your controller and then pass it to the filter. Note that the dynamic filter's value is referenced by name, not $viewValue: 

// controller
$scope.filterByObj[$scope.config['label']] = $scope.selectedFilter;

// template
... filter: filterByObj

For a better understanding of this concept, you can refer to this example: http://plnkr.co/edit/7gffq3mEtFqrfAP4shrj?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

When working with AngularJS, I noticed that the service function within a loop is only executed after all iterations have been completed

Controller Page $scope.page = { '1' : "small", '2' : "large", '3': "medium" }; $scope.form.appraisal_id = "abc123"; $scope.form.user_id = "efg123"; for(var prop in $scope.page ...

javascriptangularjs

Angular directive using ng-if to display image

I have the following code in my showCtrl: $scope.showTeam = function(){ var count = 0; for (var k in subordinates) { if (subordinates.hasOwnProperty(k)) { ++count; } } if(count > 0){ r ...

angularjsangularjs-scopeangular-ui

How to retrieve the value of a checkbox in AngularJS instead of getting a boolean value

The following code snippet shows a checkbox with the value "Athlete" and I want to retrieve that value when it is selected. <input type='checkbox' value="Athlete" ng-model="p.selected"> Currently, in the console, p.selected displays true ...

angularjsangular-ngmodel

What are effective ways to eliminate script tags from a webpage?

I have implemented tags on my website that users can use to interact with the site. My goal is to figure out how to make the browser only read text from a specific file I write, without any HTML. This should be restricted to certain sections of my websit ...

asp.netjavascripthtmlcss

Sending data from a dynamically created PHP table to a modal

In my PHP-generated table, I have: <tbody> <?php $results = DB::select()->from('users')->execute(); foreach ($results as $user) { echo "<tr id='".$user['id']."'> <input type=&bs ...

javascriptphpjquery

Icon bar struggling to contain voluminous material card content

I've incorporated Material UI cards into my project and have an icon bar at the bottom of each card. However, the media within the card is overflowing onto the icon bar, causing a layout issue as illustrated in this screenshot: https://i.sstatic.net/ ...

javascriptreactjsmaterial-ui

Retrieve the height of a div element in an AngularJS framework, and assign this value to a corresponding attribute of another element

Is it possible to retrieve the height of an element using AngularJS and assign it to another div's attribute? In my Bootstrap website, I have a fixed sidebar that needs to stop before reaching the footer. To achieve this, I currently have to manually ...

javascripthtmlangularjs

Guide on securely presenting an HTTP-only cookie as a bearer token, without the use of Angular.JS

Can a JWT be securely stored as an HTTP-only cookie and also used as a bearer token without relying on Angular.JS? I believe this could be achievable, as Angular.JS offers similar features (although I'm not sure if they use an HTTP-only cookie to sto ...

javascriptcookiesjwtbearer-token

Avoiding scrolling when a button (enveloped in <Link> from react-scroll) is pressed in React

Currently, I am implementing the smooth scroll effect on a component using react-scroll. However, adding a button inside the component to create a favorite list has caused an issue where the smooth scroll effect is triggered upon clicking the button. Is ...

javascripthtmlcssreactjs

Transforming SQL data into JSON format for Treeview using C#

I have a stored procedure that retrieves data from a table. I am looking to transform it into the following format: data: [ { text: "Furniture", items: [ { text: "Tables & Chairs" }, ...

c#sqlangularjsjsontreeview

Utilize Javascript to convert centimeters into inches

Can anyone help me with a JavaScript function that accurately converts CM to IN? I've been using the code below: function toFeet(n) { var realFeet = ((n*0.393700) / 12); var feet = Math.floor(realFeet); var inches = Math.round(10*((realFeet ...

javascripthtml

Adding objects to an existing array in Vue.js can be a seamless and

Struggling to populate my existing array with elements from a JSON response using a button click. The issue lies in properly adding these elements to the array. I have an empty array named results where I store the data from the response. export default ...

javascriptarraysjsonobjectvue.js

Tips for hiding specific rows in ng-grid

I'm working with an array of objects that I need to display in ng-grid. Each object in the array has a boolean property called isVisible. My goal is to only show the rows where isVisible is true, while completely hiding the rows where it is false. So ...

angularjsfilteringmaster-detailng-grid

Transfer a file to Amazon S3 using the Microsoft Office Add-In

I am working on developing a JavaScript Microsoft Office add-in that allows users to save a document to an S3 bucket. However, I have not been able to find a way to achieve this. Has anyone managed to successfully make this work before? ...

javascriptamazon-s3ms-officeoffice-jsoffice-addins

What is the best way to extract the text from the first visible `<td></td>` table row using jQuery?

In this particular scenario, there is a table included: <table id="table"> <thead> <tr> <th>Name</th> <th>Course</th> </tr> </thead> <tbody> <tr style="display:none"> ...

javascriptjqueryhtml

Encountered an issue with AWS S3: unable to retrieve the certificate from the local issuer

After completing my Protractor test suite execution, I am encountering an error while trying to upload my HTML result file to AWS S3 using JavaScript in my automation script. Can someone assist me in resolving this issue? static uploadtoS3() { con ...

javascriptamazon-web-servicesamazon-s3protractor

Putting AngularJS Directives to the Test with Jest

There seems to be a crucial element missing in my overly simplified angular directive unit test. The directive code looks like this: import * as angular from 'angular' import 'angular-mocks' const app = angular.module('my-app&apo ...

angularjsjestjsangular-mock

How to apply background-color to a div element with ng-repeat directive?

Hey there, I'm dealing with the following code: angular.module("myApp", []).controller("myController", function($scope) { $scope.boxList = [{ color: 'red' }, { color: '#F8F8F8' }, { color: 'rgb(50, 77, 32) ...

htmlcssangularjs

Organize database entries by categories for easy navigation

I've developed a web application centered around TV Shows to enhance my understanding of AngularJS. Within my database, I have a table containing various TV shows, each with an assigned category column. For instance, "Dexter" is categorized as "thrill ...

javascriptmysqlangularjs

Connecting Vue component data to external state sources

I am facing a challenge with integrating a Vue component into a large legacy system that is not based on Vue. This component retrieves data through AJAX requests and displays information based on an array of database record IDs, typically passed at page lo ...

javascriptajaxvue.jsvuejs2vue-component