Display chosen preferences in an Angularjs dropdown alongside additional options

I'm currently developing a blogging software and have implemented an AngularJS dropdown for selecting post terms. Here's the code:

   <select multiple="multiple" name="terms" ng-model="post.data.attributes.term_ids" required>
             <option value="" disabled="" selected="">Tags</option>

             <option ng-repeat="term in terms | filter: { taxonomy: 'tag' } " value="{{term.id}}">{{term.name}}</option>
     </select>

While this works when creating posts, I'm facing an issue when trying to edit posts. I want to display the terms that were previously selected during post creation.

In other words, if the term's ID matches any in `post.data.attributes.term_ids`, then it should be pre-selected in the dropdown. I've gone through the documentation and examples but still haven't figured out how to achieve this. Any help would be greatly appreciated.

Answer №1

One simple solution is to utilize the ngSelected attribute:

<select multiple="multiple" name="terms" ng-model="post.data.attributes.term_ids" required>
             <option value="" disabled="" selected="">Tags</option>

             <option ng-repeat="term in terms | filter: { taxonomy: 'tag' } " value="{{term.id}}" ng-selected="post.data.attributes.term_ids.indexOf(term.id) > -1">{{term.name}}</option>
     </select>

Alternatively, you could consider using ngOptions. Here's an example:

<select multiple="multiple" name="terms" ng-model="post.data.attributes.term_ids" required ng-options="term.name for term.id in terms | filter: { taxonomy: 'tag' } ">
</select>

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

"Troubleshooting: Issues with jQuery Counter Functionality

Hey there, I'm new to JavaScript and jQuery! I've got this form set up with Bootstrap's disabled class: Note: the 'disabled' class in bootstrap properly disables and enables the button based on conditions. <form action="" met ...

Ways to access information received from AngularJS in a different Javascript file

I am currently using Angular to retrieve output from a controller and display it using ng-bind. However, I have another separate JavaScript file that needs to utilize a value returned from Angular. In the example code provided below, the TestAppCtrl is ca ...

Create a unique onblur event listener for every element in a loop in Javascript

I have added several items to a column in the database, but I am unsure of how to implement an onblur function for validation for each item within a loop. For example, if the NAME field is empty, I want to display an alert, and if the length of the NRIC fi ...

Error encountered: Parsing error in Typescript eslint - The use of the keyword 'import' is restricted

My CDK application is written in typescript. Running npm run eslint locally shows no errors. However, when the same command is executed in a GitLab pipeline, I encounter the following error: 1:1 error Parsing error: The keyword 'import' is r ...

Are there any methods to implement object-oriented programming in JavaScript?

The concept of prototype-based object-oriented programming in JavaScript is intriguing, but there are many scenarios where the need for class-based object creation arises. Consider a vector drawing application, where the workspace begins empty and you can ...

Issue with Next.js: Callback function not being executed upon form submission

Within my Next.js module, I have a form that is coded in the following manner: <form onSubmit = {() => { async() => await requestCertificate(id) .then(async resp => await resp.json()) .then(data => console.log(data)) .catch(err => console ...

How to Ensure an Element Appears Above Another Despite Z-Index Troubles?

After conducting approximately 2 hours of research on this topic, I was unable to find clear answers or solutions. Hence, I have decided to address the issue here. The problem I'm facing is as follows: Due to the nature of HTML/CSS, it seems impossi ...

Ajax returns with a successful response, yet the specified action is never executed

Currently assisting with a plugin build on Wordpress and facing an issue with a basic ajax call. I am attempting to pass an object through the method 'grab_object_from_ajax_call,' but the method is not executing as expected. Below is the JavaScri ...

Angular UI-Select's issue with duplicating tags while adding objects for tagging functionality

I have implemented the ui-select library to enable the "Tagging" feature in my project. Currently, I am utilizing an Array of objects where each object contains an id and a name. The functionality is working as expected. However, when a user types in a n ...

Can you explain the process of obtaining getServerSideProps results for my IndexPage?

Having trouble with the getServerSideProps function. I'm a beginner and struggling to figure out why it's not running properly. Spent hours trying to fix it, but still getting undefined in the IndexPage console.log(props.data) export default fun ...

Type the query into the search bar on the website, hit the submit button, and receive the search results

Is there a way to dynamically pass any query string (from any oracle table, not hardcoded) from a webpage form/field to the database and have the webpage display a table/grid of the results without predefining columns or table names? Current examples I&apo ...

The Next.js component only appears after a page reload

Essentially, I have a nested component that is supposed to render with the parent component and it works fine when the server initially starts. However, the issue arises when switching back from another page – some of the nested components disappear. A ...

Retrieving information from Angular directive by utilizing the Express interface

Recently, I have developed an interface using express and mongoose that successfully fetches data from mongodb and sends it to the client side without any issues. However, I encountered some errors when trying to retrieve the data using AngularJS $http met ...

Paper.js - generate a collection of movable shapes

I am attempting to use paper.js to create draggable shapes where the index of each shape is provided during dragging. Unfortunately, I keep encountering an error that says "Uncaught TypeError: Cannot read property 'position' of undefined". If a ...

How can I dynamically set the width of a span element in HTML?

Hello there! As a beginner in html and angularjs, I'm experimenting with dynamically assigning span width based on an angular js response. <div class="statarea" ng-repeat="x in names"> <div class="ratingarea"> <div class=" ...

Looking for a speedy solution with a [PHP function] that needs to be converted to a [JavaScript function

Looking for a quick favor - can anyone help me out with this: static function make_url_safe($z){ $z = strtolower($z); $z = preg_replace('/[^a-zA-Z0-9\s] /i', '', $z); $z = str_ireplace(' ', '-', $z) ...

The functionality of the .toggle method is limited to only being effective 1.5

I'm having an issue with making an image popup using the .toggle function in javascript. It seems to work initially, but then only works partially after that. When I click on the image, it opens as expected. However, when I try to close it by clickin ...

Next.js application deployment halted due to an unsuccessful completion of the process with the command "/bin/bash -ol pipefail -c npm ci"

After completing the development of a Next.js application (discord clone), I encountered an issue while trying to deploy it on Railway. The error message was: Dockerfile:20 ------------------- 18 | ENV NIXPACKS_PATH /app/node_modules/.bin:$NIXPACKS_P ...

Is it possible to extract my current location from one website and then access another website based on that location?

I am currently experimenting with an HTML5 script that loads a globe requiring users to click on it to determine the location. Once a location is clicked, another site opens displaying a map of the chosen location. Here is an example of the site with the i ...

Working with Angular: Dealing with ngRepeat and Empty Inputs

I am currently working on a project where I have an ng-repeat with a list of inputs. Interestingly, if the inputs are empty, the corresponding LI is hidden. <li ng-repeat="(key, value) in jewel" ng-if="value !== ''"> <input ng-mode ...