How can i put json in my views?

Question

I'm new using JS and I have a little problem,

My application is being done with Angular JS. I have my service /api/service that return json with all users in the DB.

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

UsersController:

   var UsersController= function ($scope, $location, UsersFactory, $http) {
$scope.confirmDataForm = {
    emailAddress: 'email@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 want to do a ComboBox with names of all users, but I don't know how. (Service is done)

My cshtml is something like this:

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

Thanks!

Answer 1

I suggest to use isteven multiselect.

Git: https://github.com/isteven/angular-multi-select

Demos: http://isteven.github.io/angular-multi-select/#/main

In short:

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

Put users in $scope.namesOfAllUsers = [] and this will list all your users, if u pick some users then they will be puted in $scope.pickedNames = [] array.

If u want to restrict only to pick one username then add selection-mode="single" in div.

Hope it helps