Obtaining Distinct Values in AngularJS Using ng-option

My table contains the following data:

info = [
  {id: 1, name: 'Manchester United', type: 'Soccer', featured: true, country: 'England'},
  {id: 2, name: 'Manchester City', type: 'Soccer', featured: false, country: 'England'},
  {id: 3, name: 'Dallas Mavericks', type: 'Basketball', featured: true, country: 'USA'},
  {id: 4, name: 'Indian Cricket Team', type: 'Cricket', featured: true, country: 'India'},
  {id: 5, name: 'Australian Cricket Team', type: 'Cricket', featured: false, country: 'Australia'},
  {id: 6, name: 'Los Angeles Lakers', type: 'Basketball', featured: true, country: 'USA'},
  {id: 7, name: 'Los Angeles Clippers', type: 'Basketball', featured: false, country: 'USA'}
];

I'm trying to include a dropdown menu for countries. When a country is selected, I want the table to display only sports from that specific country.

The issue I'm facing is that I can't seem to populate the dropdown with unique countries.

Any assistance would be greatly appreciated. Thank you in advance.

javascriptangularjs

Answer №1

I made adjustments to your plnkr example, which can be found here: http://plnkr.co/edit/60GO0zhSGoEUm7tu6mbc?p=preview

Regarding the filter, it was inspired by this question about ng-options and unique filter not displaying in angular.js

For the select part: 


<select data-ng-model="countryModel" ng-options="dd.country as dd.country for dd in data | unique:'country'">

And for the ng-repeat part: 


<tr data-ng-repeat="dat in data | filter: countryModel" data-ng-style="set_color(dat)">

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

Chip component in Material UI for Meteor/React not recognizing the onRequestDelete method

I'm currently integrating Material UI's chip element into my application and as per the documentation onRequestDelete - Callback function triggered when the delete icon is clicked. If specified, the delete icon will be displayed. import React f ...

javascriptmeteorreactjsmaterial-ui

The AngularJS $http.post method resulted in a 404 error

I am currently experimenting with posting data to the server using $http.post in Angular. The backend of my project is built with Laravel. As a beginner in Angular, I haven't implemented anything complex yet. However, when attempting to post to /api, ...

phpangularjslaravel

Tips for transferring an MVC model to a UI-bootstrap modal

Trying to implement an Angular/bootstrap modal for editing MVC ApplicationUser scaffolded views. Came across jquery examples but want to stick with angular-ui or plain bootstrap for consistency in modals. Unclear on how the MVC controller is being called f ...

javascriptjqueryasp.net-mvcangularjstwitter-bootstrap

Navigating the express subdomain

I'm currently utilizing the package express-subdomain. The issue is that the router handling subdomain requests is the same as the one handling non-subdomain requests. I suspect there's an error in my 'app.js' configuration. How shoul ...

javascriptnode.jsexpressexpress-subdomain

html<script src="" and causing a redirect when button is clicked

My login.html page for logging in can be found in the design folder. <html> <head> <title>Login Page</title> <script src="../Script/login.js"> </script> </head> <body> <h3> Login</h3> ...

javascripthtmlsrc

Lustrous Layout

I am developing a mobile app using titanium where I have a scroll view containing objects that occupy 25% of the screen width. I am attempting to create a 'table' layout with these objects, having 4 columns and multiple rows. Is there a way for t ...

javascriptiphonetitaniumtitanium-mobile

What is the best way to pass cookies between domain and subdomain using nookies?

Recently, I've been facing some challenges with sharing cookies between my app and website while using nookies. Below is the code snippet from my app.mydomain.com file: //setCookies to main domain setCookie(null, 'jwt', login ...

javascriptreactjscookiesnext.js

What could be causing my onscroll function to cut off before reaching the end of the element?

Struggling with a function I created to slide a div horizontally into view in the center of a vertically scrolling page. It seems to work well under normal conditions, but when the page is scrolled quickly, it sometimes fails to complete the horizontal mov ...

javascript

Foundation 4 - image hover effect to display alternate image

I am a newcomer to Foundation 4, but I have some coding experience. Currently, I am in the process of transitioning my photography blog (www.momentaryawe.com/blog) from Wordpress with a custom theme to a custom theme built on Foundation 4. Most aspects of ...

javascriptjquerycsszurb-foundation

Unable to invoke the jQuery function within CakePHP3

I am having trouble calling the jQuery function mentioned below in my CakePHP3 MVC project. There are no error messages, but nothing seems to be happening. The code is set up so that jQuery gets included automatically. The function I am trying to call sh ...

javascriptjqueryhtmlcakephp

The modal is functioning perfectly with the initial row in the table

Is there anyone who can help me fix this issue? I've spent a lot of time trying different solutions, but none of them seem to work. I'm using a tailwindcss template for the modal and JavaScript to show or hide it. I'm having trouble findin ...

javascripthtmljquerylaravel

Issue with Vue and Firebase: New users are being created successfully, but are being logged into existing user accounts

I've encountered a strange issue in Firebase. When I create a new user with the same password as an existing user, the new user is logged in under the previous user's account and displays all their information. However, upon logging out and signi ...

javascriptfirebasevue.jsfirebase-authentication

Issue: The hook call is invalid. In React Native, hooks can only be called within the body of a function component

While attempting to utilize useSelector within the component, I encountered an error message stating: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. backgroundTasks.js: import axios from "axios"; i ...

javascriptreactjsreact-nativepush-notificationreact-hooks

Transform an array into an array of objects using the reduce method

optimizedRoute = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore'] result = [ {start: bengaluru, end: salem}, {start: salem, end: erode}, {start: erode, end: tiruppur}, {start: tiruppur, en ...

javascriptarraysecmascript-6

What are the steps for adding an audio file to Firebase Storage?

I'm currently attempting to upload an audio file to Firebase Storage within my Ionic2 project. Initially, I successfully recorded the audio file using the Media plugin (Cordova plugin), and it is playing back correctly from both Android storage and t ...

angularjscordovafirebaseionic2firebase-storage

Issue with AngularJS UI Router not loading the inline template and controller

I am trying out UI Router for the first time in my AngularJS project. I am facing an issue where, when I click on a link to view a post, it doesn't display. The post template is not visible and I remain on the home page. The URL flashes as http://loc ...

javascriptangularjsroutesangular-ui-router

Removing a property from a JSON object when initiating an Ajax request in JavaScript

Looking for guidance on JavaScript and ajax as a beginner. I have a JSON with an output cell that I want to remove: { "cells": [{ "metadata": { "trusted": true, "collapsed": false }, ...

javascriptajaxjupyter-notebookgist

Guide to swapping images based on conditions using Angular JS

I am trying to display an image based on data received from an API response instead of text. If the value is true, I want to show an access symbol. If the value is false, I want to show a deny symbol. However, when attempting this, I am only getting th ...

javascripthtmlangularjs

No departure animation employed - Polymer

I am working on a project that involves animating a paper-icon-button with spin and opacity effects when hovering over an image using the on-mouseenter and on-mouseleave events. Everything works smoothly when hovering over the image, but I am facing an is ...

javascripthtmlcssanimation

JavaScript function is not identifiable

I am currently developing a tic-tac-toe game with 9 buttons that will display either an X or O image depending on the boolean value of the variable isX. The main container for these buttons is a div element with the id 'stage' and each button ha ...

javascripthtmlcssfunction