Setting the default value of a multi-select dropdown in AngularJS from the controller

Currently, I have implemented AngularJS multi select drop down functionality on my website. The code for this can be found at the following source: MultiSelectDropDown

In my HTML page, I have included the same drop down twice and I want to customize the default selected names for each. Specifically, I would like the first multi select drop down to display "Projects" as the default selected name, and the second one to display "Environments."

The multiselect.js file contains a directive where scope.header is currently set to "Select" by default. I am looking to update this default name to "Projects" and "Environments" respectively, either directly in the HTML syntax or by updating the value of scope.header from the controller.

If anyone could assist me in making these modifications, it would be greatly appreciated.

javascriptangularjsangularjs-directiveangularjs-ng-repeat

Answer №1

Overview

The directive currently has the string value 'Select' hardcoded in it, which needs to be changed to make it dynamic.

Code

I implemented some modifications as follows:

https://plnkr.co/edit/J4CBblcfdDcrvE6K?preview

Index.html

I included a new header attribute with my desired text content.

Lines 17-24

  <multiselect class="input-xlarge" multiple="true"
        ng-model="selectedCar"
        header="Cars"
        options="c.name for c in cars"
        change="selected()" ></multiselect>
        <div class="well well-small">
            {{selectedCar}}
        </div>

multiselect.js

I assigned the scope.header to the input attribute, defaulting to 'Select' if no value is provided.

Line 45

scope.header = attrs.header || 'Select';

Line 119

If (!modelCtrl.$modelValue || !modelCtrl.$modelValue.length) return scope.header = attrs.header || '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

Step-by-step guide to including a new path to $resource within an AngularJS Service

Currently, I am utilizing this service to manage my courses and I am looking to add another URL for handling REST endpoints. Specifically, I want to create an update function that will change the lastAccessDateTime property of a course using the server&apo ...

javascriptangularjsnode.jsangular-services

Is it possible that using npm link could be the root cause of the "module not

As I delve into understanding how to utilize TypeScript modules in plain JavaScript projects, it appears that I am facing a limitation when it comes to using npm linked modules. Specifically, I can successfully use a module that is npm-linked, such as &apo ...

javascriptnode.jstypescriptnpm

Issue with Electron Remote process failing to take user-defined width and height inputs

I'm currently facing an issue with utilizing remote windows in electron. I am attempting to process user input and use that input to generate a new window with specific width and height. However, when I hit submit, nothing happens. I can't figur ...

javascripthtmlnode.jselectron

Unable to access complete map using ngmap and AngularJS

I am currently working with ngmap and encountered the issue shown in this screenshot https://i.stack.imgur.com/WchKT.png Here is my code: var app = angular.module('dv', ['ngMap']) app.controller('MC', function($scope){ ...

angularjsng-map

How to implement and utilize a history-object interface in React with Typescript?

Can you help me with setting up an interface for a history object in my component? Currently, it is typed as any and I want to type it appropriately. Object: https://i.sstatic.net/Sru8R.png Here's the code snippet: import React, { useState } from &a ...

javascriptreactjstypescript

Having trouble uploading the file to IPFS: Encounter an issue with HTTPError: project id is mandatory

Currently in the process of developing a basic DApp for sharing chats, with similarities to Twitter but based on a smart contract. I am utilizing hardhat and running my application on localhost. While implementing the feature for users to upload a profile ...

javascriptnext.jsipfshttp-error

Fetch a document from a NodeJS Server utilizing Express

Is there a way to download a file from my server to my machine by accessing a page on a nodeJS server? I am currently using ExpressJS and I have attempted the following: app.get('/download', function(req, res){ var file = fs.readFileSync(__d ...

javascriptnode.jsfileexpressdownload

Tips for displaying only one image when clicked and hiding other divs:

Currently tackling a project that involves JavaScript and I've hit a roadblock. Before you dive into the text, take a look at the image. Check out the picture here. I have successfully created a slider, but now I want to implement a feature where cli ...

javascriptjqueryhtmlcss

Tips for incorporating Bootstrap classes into a React project, setting the className attribute to an empty string

After setting up Bootstrap and Create-React-App using npm on my local machine, I proceeded to create a new React app. The first component I worked on was counter.jsx: import React, { Component } from 'react'; class Counter extends Component { ...

javascriptcssreactjsbootstrap-4

The cookie set in express.js is not being successfully set in React.js, even after setting up CORS and using credentials: 'include'

I have been struggling to set a cookie from my express backend using a React frontend. The cookie shows up in the response header, but for some reason, the browser refuses to set it. I've tested this on Chromium and Firefox, with no success. Interesti ...

javascriptnode.jsreactjsexpresscookies

Understanding how to open a PNG file in the client-side browser and transform it using PNGJS in React

Utilizing React JS for my application development is a current focus of mine. I have a solid understanding of how to import images within the client/browser folder structure. For example: import maze_text from '../../mazes/images/maze_text.png&apos ...

javascriptrubyreactjsfilereaderpngjs

Error encountered in attempting to create an embed using discord.js v14.7.1: TypeError - The value being extended, either undefined or null, is not a valid

The specific problem arises when defining the module export for the HelpCommand class: **module.exports = class HelpCommand extends Command {** The content of the help.js file, without URLs, is as follows: const fs = require('fs'); const { Comma ...

javascriptdiscord.js

Adjust the size at the location of the cursor

I am having trouble understanding how to implement zoom based on mouse position using this example here: (https://stackblitz.com/edit/js-fxnmkm?file=index.js) let node, scale = 1, posX = 0, posY = 0, node = document.querySelector('.f ...

javascripthtmlcanvashtml5-canvas

Passing props in VueJS is a common task, especially while redirecting to another

I am working with two separate single-file components, each equipped with its own named route. In the Setup.vue component, there is a basic form that gathers and sends data to the Timer.vue component which expects certain props. Is there a way to navigate ...

javascriptvue.jsvuejs2vue-componentvue-router

Tips for invoking an asynchronous function within an if condition?

When trying to maintain variables in the background.js of a Chrome extension, I encountered difficulties that require me to reinitialize some global variables. Here is the code snippet (view fiddle) I am using to demonstrate the issue: var temp = null; ...

javascriptasynchronousasync-awaitpromise

Sending data from child components to parent components in Angular

I'm facing an issue with retrieving data from a child array named store within user data returned by an API. When trying to access this child array in my view, it keeps returning undefined. Code export class TokoPage implements OnInit { store= nu ...

javascriptangulartypescript

Using Jquery to load a css background image with a loader

I am seeking suggestions on how to display a loader between button clicks while waiting for a background image to fully load. Thank you <html > <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type= ...

javascriptjqueryhtmlcsspreloader

Is it possible to adjust text wrapping based on the size of the screen?

I am currently facing an issue with my modal form where the text does not wrap properly depending on the size of the modal form. I need help with correcting this using CSS. My current approach involves using angular with new lines and hardcoding line brea ...

htmlcssangularjs

Displaying AJAX Confirmation in a Popup Window

My form is set up to insert data into a database via an AJAX request. Upon successful insertion, the "rentinsert.php" will display a success message on the page that reads "Your order has been placed". However, I would like this success message to appear i ...

javascriptphpjqueryhtmlajax

What is the best way to save JavaScript array information in a database?

Currently working on developing an ecommerce website. My goal is to have two select tags, where the options in the second tag are dynamically populated based on the selection made in the first tag. For example, if "Electronics" is chosen in the first tag f ...

javascriptphphtmlsqlarrays