I need help with displaying the ProjectID's in a drop-down list format where users can select one value. Can you provide an example on how to achieve this?
[
{
"ProjectManagerID": 4,
"ProjectID": 4,
"ResourceID": 4,
"Deleted": false
},
{
"ProjectManagerID": 5,
"ProjectID": 8,
"ResourceID": 5,
"Deleted": false
},
{
"ProjectManagerID": 6,
"ProjectID": 9,
"ResourceID": 6,
"Deleted": false
},
Creating a new module in AngularJS called "myApp" with an empty dependency array.
Defining a controller named "myController" with scoped variables options and optionValue.
Setting options as an array of objects with id and name properties.<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<select ng-model="optionValue" ng-options="opt.id as opt.name for opt in options">
<option value="">Please select a value</option>
</select>
</div>
</div>One way to create a dropdown menu is by utilizing the Bootstrap framework
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
</div>
</body>
</html>Source: http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
You also have the option to utilize ng-repeat
<select ng-model="selected"
class="form-control">
<option value={{project.ProjectID}} ng-repeat="project in YOUR_PROJECT_LIST">
{{project.ProjectID}}
</option>
</select>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl" ng-init="ctrl.setProject(8)">
<select ng-options="project.ProjectID as project.ProjectID for project in ctrl.projects" ng-model="ctrl.projectID">
</select>
</div>
</div>
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.projects = 'Your data goes here!';
vm.setProject = setProject;
function setProject(projectID) {
vm.projectID = projectID;
}
}
I have shared a jsfiddle link here, where the ng-options is being used to generate <option> tags within a <select> element, making it dynamic and interactive.
The usage of the "as" clause in the ng-options is crucial as it helps in setting the selected option based on the specified property (in this case, projectID), ensuring smooth functionality.
While the ng-init directive has been utilized in the provided example to initialize the selected option using a specific function, it's recommended to handle such logic directly within the controller for better code organization.
If you are interested in enhancing your Angular skills, I suggest taking a look at John Papa's style guide, which offers valuable insights and best practices.
I have noticed several similar issues on this platform, but none of the solutions seem to work for me. My understanding is that because our Ng2App is bootstrapped first, it does not have a reference to $injector yet. Consequently, when I attempt to use it ...
I have attempted to solve this issue multiple times, trying everything I could find on Google and stack overflow without success. At times I am getting the span element and other times the div - what could be causing this inconsistency? $(".bind-key"). ...
I am looking to animate a font awesome pseudo element on my website. Below is the HTML code I am working with: <li class="has-submenu"> <a onclick="$(this).toggleClass('open').closest('.has-submenu').find('.submenu&a ...
I am facing an issue with a JSON string that contains a list of arrays. I need to assign the array to a different class. Below is my JSON data: { "timestamp" : "1390257561" , "bids" : [ [ "833.98" , "3.14189766" ] , [ "833.73" , ...
I'm currently assisting a friend with making some final adjustments to their website. The site is built on Wordpress using the Twentyfourteen theme and can be found at centromariposa.no. Most of the modifications have been completed, but I'm fac ...
Here is the JSON data I am working with: { "name": "table", raw_material: { "iron": 2, "wood": 1, "glue": 1 } } Occasionally, it might look like this: { "name&q ...
When I click on the "Active account" button inside the designated td with the <tr id="tr_color" >, I want the value "1" to be added to the 'active_account' column in the database. I have been successful with this functionality. However, I a ...
Looking for a solution to open a fancybox gallery with a double click on a grid of sortable images. The goal is to be able to focus on an image with a single click, allowing for sorting using keyboard commands rather than drag and drop. I attempted to use ...
I have created an HTML table and used ng-repeat to display items in the table. However, I am unable to select multiple rows in the table. How can I achieve this using the control key? Thank you! <div class="table_bg"> <table datatable="ng" dt-opt ...
Is there a way to add text at the cursor position in an editable span when a button is clicked? The span contains multiple lines of text and HTML tags. [Take a look at this example on JSFiddle](http://jsfiddle.net/8txz9sjs/) ...
Currently working with Scala and Argonaut, my task involves parsing JSON data structured as follows: [ { "name": "apple", "type": "fruit", "size": 3 }, { "name": "jam", "type": "condiment", "size ...
I'm new to flutter and wondering how can I parse this JSON Object into a listview? // API response "code": 200, "message": "OK", "payload": { "items": [ { "package": { "order": { ...
I'm currently facing a challenge with this particular topic. My goal is to add the response data that I retrieve from Express to my angular $scope and then direct the user to their profile page. This is how my Controller Function is structured: $sc ...
As a newcomer to Java, I have been working on a simple faculty project that involves parsing JSON with Eclipse. However, I have run into some difficulties and am unsure how to proceed when dealing with multiple objects in the JSON file. This is how I have ...
I recently followed a tutorial on setting up a REST webservice for JSON and XML. While XML outputs correctly, I encountered an issue with JSON calls which resulted in the "view not found" message from Cake. To address this problem, I made some modificatio ...
I'm currently working on customizing the menu of my WordPress theme to display a different color for the active page name. Although my CSS code works well for all page names except the current one: .navbar-nav li a { font-family: georgia; fo ...
Whenever I click on a p:menuitem and update the content of a layoutunit, the CSS style of the layoutunit disappears. Strangely, when I refresh the page, the style magically reappears. Can anyone explain why this happens? <p:layout id="plantillaPrincipa ...
I'm currently building a website and I am facing some challenges when trying to incorporate JavaScript for real-time calculations. Here are my issues: Is there a more efficient way to avoid manually typing out the code for each level up to 90, lik ...
I've encountered an issue where the ng-click event is not activating on my element. Despite using the in-line controller script as shown below, I am unable to trigger my alert. Are there any integration issues that I should be mindful of? What could p ...
const person = { "name": "jacob", "age": 22 } I am looking to dynamically update it to: { "name": "jacob", "age": 22, "dob": number } ...