What is the best way to incorporate JSON into my views?

As a newcomer to using JavaScript, I've encountered a little issue.

I am working on an Angular JS application where my service /api/service returns JSON with all users in the database.

I have a Factory named "UsersFactory.js" and my Controller is called "UsersController".

UsersController:

var UsersController = function ($scope, $location, UsersFactory, $http) {
$scope.confirmDataForm = {
    emailAddress: 'example@email.com',
    firstName: 'Ryan',
    lastName: '',
    organization: '',
    organizationType: '',
    city: ''
};

UsersFactory:

var ConfirmDataFactory = function ($http, $q) {
    return function (emailAddress, firstName, lastName, businessAddress, organization, organizationType, city, state, zip, password) {

        var deferredObject = $q.defer();

        $http.post('/Account/ConfirmData', {
                Email: emailAddress,
                FirstName: firstName,
                LastName: lastName,
                Organization: organization,
                OrganizationType: organizationType,
                BusinessAddress: businessAddress,
                City: city,
                State: state,
                Zip: zip,
                Password: password
            })
            .success(function (data) {
                if (data === "True") {
                    deferredObject.resolve({ success: true });
                } else {
                    deferredObject.resolve({ success: false });
                }
            })
            .error(function () {
                deferredObject.resolve({ success: false });
            });

        return deferredObject.promise;
    };
}

ConfirmDataFactory.$inject = ['$http', '$q'];

I would like to create a ComboBox with names of all users, but I'm unsure how to do it. (Service is complete)

The cshtml code looks something like this:

<select class="" ng-model="confirmDataForm.city" id="city">
<option ng-repeat="todo in todos">
{{todos.text}}
</option>
</select>

Thank you!

Answer №1

If you're looking for a great multiselect option, I recommend using isteven multiselect.

Check out the Git repository here: https://github.com/isteven/angular-multi-select

You can also see some demos of how it works here:

In summary, here's how to use it:

<div
    isteven-multi-select
    input-model="namesOfAllUsers"
    output-model="pickedNames"
    button-label="icon name"
    item-label="icon name maker"
    tick-property="ticked"
>
</div

To populate your list of users, simply add them to $scope.namesOfAllUsers = []. Any users you select will be added to the $scope.pickedNames = [] array.

If you only want to allow selection of one user at a time, include selection-mode="single" in the div.

I hope this information is helpful to you!

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

Display the Astro component based on the query of the current page's type

I am using Astro, GraphQL (Apollo Client), Typescript and React. Within my dynamic route: [...slug].astro file, I have a requirement to conditionally display a specific Astro component. I was able to achieve this using the following logic: {data.page.ty ...

What is the best way to use Jquery to enclose a portion of a paragraph text within a

How can I wrap the content inside a span that comes after another span, inside a paragraph and a new span? To further illustrate this, consider the following example: <p>foo <span>bar</span> baz</p> The desired outcome is: <p& ...

Ways to implement a shared ng-model across multiple elements

Brand new to AngularJS here! I have a page with multiple input boxes where users can enter tracking numbers. The number of input boxes can vary from 1 to 10. I am struggling to fetch data from all input boxes as I am only able to retrieve data from the fi ...

Interact with an external JavaScript function using a button within a web application

I have a JavaScript file called dmreboot_service.js in my /js folder. By running this file with the command node /js/dmreboot_service.js, it successfully triggers a direct method in Azure. My goal is to be able to run this function or file when a button o ...

What could be causing the issue of why the null check in JavaScript isn't functioning properly

function getProperty(property) { console.log(localStorage[property]) //Displays “null” if(localStorage[property] == null) { console.log('Null check') return false; } return localStorage[property]; } The log outputs "nu ...

Angular's Digest cycle can be triggered by `forcing a digest`

Is there a way to trigger a digest after a user action in order to update the UI based on changes in the data model? I have a service that performs asynchronous changes in a callback. Since `$scope` is typically used within controllers, can I achieve the ...

How to apply color to text in Node.js

I am in the process of creating a web-based compiler using NodeJS. My main objective is to highlight syntax in different colors. For example, consider the following C code: int var; printf("%d",var); In this code snippet, I would like the "int" and "prin ...

Utilizing a service to access directive scope within a controller

I attempted to retrieve a value returned by a directive within my controller using a service. However, I encountered an issue where it seems like the updated return value from the directive is not being captured by the controller. Below is the code snippe ...

Error: The value entered for the 'end_time' column in row 1 is outside of the acceptable range

My current scenario involves sending a JSON payload from an Android device to a web-service. The JSON includes two fields, namely startTime and endTime. Both startTime and endTime are of type Long in the DTO classes on both the client and server sides. How ...

Vue.js tutorial: Displaying the like count on every post

Code Snippet in My Home.vue File: <template> <div> <my-post v-for="(post, index) in posts" :post="post" :index="index" :key="post.id" ></my-post> </div> ...

Preventing Duplicate Entries in Angular Data Posting

I am currently trying to submit a form to a PHP page that will then return a table of data. The process works perfectly fine if I do not include any parameters in the post request. However, as soon as I try to add parameters for the query, I encounter an n ...

Switching between height: 0 and height:auto dynamically with the power of JavaScript and VueJS

Currently, I am changing the height of a container from 0px to auto. Since I do not know the exact final height needed for the container, using max-height could be an option but I prefer this method. The transition from 0 to auto works smoothly, however, ...

The click event in jQuery/JavaScript is not functioning

Although it should be as simple as breathing, I just can't seem to spot the mistake in my code... I attempted to add a click event to a div with a unique ID, but unfortunately, it's not working at all. This issue persists with both jQuery and Ja ...

I am curious about the distinction between two closures

Can someone please explain the distinction between these two closure examples? (function(window, undefined) { // JavaScript code })(window); Here's another example: (function(window) { // JavaScript code })(window, undefined); ...

Tips for displaying a progress bar during the loading of controls

Is there a way to show a progress bar while dynamically generating controls based on the user selection from a dropdown list? The values for these controls are retrieved from a database. ...

What is the process for unit-testing a compiled template with the "controller as" approach?

I have been trying to unit test my controller with a template. I found that it works fine if everything is linked to $scope. However, when I switched to using the "controller as" syntax, the test stopped working. It makes sense since now everything is tied ...

What steps can I take to resolve the issue in my code? I keep receiving a type error stating that it cannot read

I seem to be encountering an issue when running my code where I receive a 'cannot read property 'age' of null'. This error breaks my code, and I'm trying to figure out how to implement a check to ensure it only runs when I am signe ...

Unexplainable space or padding issue detected in OwlCarousel grid gallery

There seems to be an unusual gap or margin at the bottom of each row section in this portfolio grid gallery that's running in OwlCarousel. You can view an example here. https://i.stack.imgur.com/NHOBd.png I've spent a lot of time trying to solv ...

Submitting a form with Ajax, PHP, and JavaScript while storing the value in local storage

Struggling to submit both data and a local storage value into my MySQL database in one AJAX post. Able to do one or the other separately, but not simultaneously. var dataString = 'title=' + title + '&level=' + level + '& ...

Mastering the art of coding with Angularjs and Node.js - Building a simple contact form from scratch - Error detected in shorthand property

Welcome to my first post here! I have recently started learning to code using Angularjs and Node. After completing a few javascript courses without any issues, a friend challenged me to create a basic contact form with Angularjs to send an email through N ...