AngularJS login form with JSON data

I am currently learning Angular and focusing on the login form implementation.

The specific model I am working with can be found in this PLNKR. There are two challenges that I am struggling to resolve.

  • Issue 1: I'm trying to figure out how to turn the modal window into a standalone page. The code for the modal is located in "parentController.js": 

    $scope.modalShown = false;
var showLoginDialog = function() {
if(!$scope.modalShown){
    $scope.modalShown = true;
    var modalInstance = $modal.open({
        templateUrl : 'login.html',
        controller : "LoginCtrl",
        backdrop : 'static',
    });

    modalInstance.result.then(function() {
        $scope.modalShown = false;
    });
}
};

  • Issue 2: Within the login form, found in the "login.html" file, I need to replace the username div with a dropdown menu:

    <div style="margin-top: 25px" class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i>
   </span> 
   <select class="form-control" name="username"
    ng-model="credentials.username">
    	<option value="Admin">Admin</option>
    	<option value="Editor">Editor</option>
    	<option value="Guest">Guest</option>
    </select>
</div>

    How can I replace the input field with a dropdown listing the usernames from an array (e.g., "Admin, Editor, Guest")?

Thank you for your assistance!

javascriptangularjsjsonforms-authentication

Answer №1

Would you like to remove the model window first?

Next, use ng-repeat as follows:

<select>
   <option ng-repeat="category in itemArray" value="{{category}}">
        {{category}}
   </option>
</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

Looking to crop a canvas without changing its dimensions using jQuery

I'm currently working on a project that involves overlaying two images; one uploaded by the user and the other a default image. However, I am facing an issue when the uploaded image is a rectangle instead of a square, causing the canvas to resize it. ...

javascripthtmljquerycanvasoverlay

Can you explain the distinction between using "require" to return a module and accessing the actual object in node.js?

When working with node.js, the commonly used method to include modules from other files is by using "require", whether it's from our own code or third-party libraries. But for me, there seems to be some confusion regarding the distinction between the ...

javascriptnode.jsoop

Challenges of performance in EmberJS and Rails 4 API

My EmberJS application is connected to a Rails 4 REST API. While the application is generally working fine, it has started to slow down due to the nature of the queries being made. Currently, the API response looks like this: "projects": [{ "id": 1, ...

javascriptsqlruby-on-railsperformanceember.js

Top strategy for structuring nested classes in JSON feeds

Currently, I am utilizing the Facebook API in C# and leveraging the NewtonSoft JSON library to process all the data returned by the API. While working on retrieving a list of user pages, I often find myself creating custom classes for individual attribute ...

c#jsonclassjson.net

Unable to establish a connection with the TCP server on CloudFoundry, although the localhost node.js is functioning properly

I am experiencing difficulty connecting to my TCP server example that is running on CloudFoundry. Interestingly, when I run my app.js file on a local node.js installation, everything works perfectly. Upon using vmc push to deploy on CloudFoundry, the servi ...

javascriptnode.jstcpcloud-foundry

JavaScript: Troubleshooting Array Formatting

Seeking assistance with formatting this JavaScript array accurately. It seems like I am overlooking something crucial: Javascript: <script type="text/javascript"> var dimensions = new Array("225","320","480", "--"); var walls = new Array() ...

javascriptarraysmultidimensional-array

A compilation of web browsers and their compatible versions for the SVG engine

I recently encountered an issue with the org chart I created using getorgchart. Everything was running smoothly until I tested it on IE8. It turns out that getorgchart relies on the SVG engine for rendering, which is not supported by IE8. I attempted to ...

javascriptjquerysvgorgchart

Using an external filter within the ng-grid component

Currently, I am facing a challenge with implementing filter functionality in my table using three search fields - name, target, and reach. The first two filters are working well, but the last one needs to filter by lower-than or higher-than comparison. To ...

angularjsng-grid

Why does my express POST request result in an empty req.body in Node.js?

After confirming that my data is being passed correctly and the db connection is successful, I am facing an issue with my ajax request. Even though the success callback returns the id, my data seems to not be passing through properly. When attempting to a ...

javascriptnode.jsajaxexpresspost

Validation does not occur once the data has been loaded

I developed a function that calculates the percentage of form completion. However, I am encountering an issue where when editing an existing record, the validation does not kick in until data is edited in one of the inputs. <div ng-form="dtform" class ...

javascriptangularjsformsvalidation

Error: Unable to access the property 'fn' of an undefined object in electron version 2 using Angular 6

I am currently utilizing Angular 6.0.3 and electronjs 2.0.2 with the package.json configuration shown below: { "name": "test", "version": "1.0.0", "license": "MIT", "main": "electron-main.js", "author": { "name": "Moh ...

javascriptangularelectronangular6

Javascript Array Dilemmas

The current task; Determine whether the first string in the array contains all the letters of the second string. For instance, ['hello', 'Hello'] should result in true as all letters from the second string are found in the first, rega ...

javascriptarrays

Reveal or Conceal Information Depending on Cookie Status

Below is the Jquery code I am using: $("#tool").click(function() { $(".chelp").slideToggle(); $("wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { $("#tool img").toggle(); }); }); When the #tool img is clicked, bot ...

javascriptjquerycookies

Exploring the depths of nested documents in Mongoose and MongoDB

I am dealing with a schema that is recursively nested, similar to how comments function on a blog. I am trying to figure out the best approach to extract an individually nested document that could be buried within multiple layers of nesting. I know that I ...

jsonmongodbnode.jsmongoose

Adjusting the value of a user form with multidata in PHP and Javascript

I am looking for guidance on how to modify the value of an input in a form that contains multiple data entries. Here is my form: <form method="post" action="pax-flight.php#pax-flight" class="paxform"> <input type="hidden" value="{"data":{"us ...

javascriptphpajax

Using Laravel to manipulate JSON arrays

In my project with Laravel 5.3 and AngularJS, I send JSON data from AngularJS to the server like this: {"grc":{"id":1},"floatingGrcs":[{"days":"10","units":"100"},{"days":"20","units":"200"}]} Now, I need to extract and work with this array in my Laravel ...

angularjsjsonlaravel

Identifying browsers with Zend Framework versus JavaScript

Currently, I am working on developing an application that demands the capability to upload large files. After much consideration, I have opted to utilize the FormData object as it allows me to provide progress updates to the user. Sadly, Internet Explorer ...

phpjavascriptzend-frameworkmootoolscross-browser

Google Tag Manager experiencing issues with retrieving dataLayer variable, showing as undefined

I'm attempting to establish a dataLayer variable in order to push the product name into the event label. Here is the dataLayer push that occurs when a user adds a product to their cart: { event: "addToCart", gtm: { uniqueEventId: 10 ...

javascriptjavascript-objectsgoogle-tag-manager

I'm having trouble getting the app.locals function within a button to work on my EJS template. Can anyone help troub

Below is the content of my script named agents.js: var express = require('express'); var router = express.Router(); var app = express(); // Is it appropriate to call Express like this twice? router.get('/', function(req, res, next) { ...

javascriptnode.jsexpressejs

Disabling the visibility of elements through a transparent sticky-top menu

I'm having an issue with my website design. I have a gradient background and a sticky-top menu on the site. The problem is that when I scroll down, the content appears through the menu, which is not ideal. I don't want to apply the same gradient ...

javascripthtmlcssnavbar