Strategies for extracting data from a controller with multiple select options

I need to retrieve all selected results for use in my controller.

<div class="form-group" ng-repeat="att in arr track by $index"  ng-hide="check">
   <div class="col-md-3">
        <label for="phone">{{att.name}}</label>
   </div>
   <div class="col-md-9">
        <select class="form-control" ng-model="user.charactValue" multiple="true">
            <option ng-repeat="itemss in att.value track by $index" value="{{itemss}}" >{{itemss}}</option>
        </select>
        <div class="text-center"><a  data-toggle="modal" data-target="#addNewCharacteristic" ng-click="getObj(att)">Add</a></div>
   </div>
</div>
<input type="submit" ng-click="companyBusinessAsset">

$scope.companyBusinessAsset = function() {
    console.log ($scope.charactValue);
    // this returns Undefined
};

The following code is being used, but it always enters the 'if' statement.

$scope.charactValue = [];

$scope.$watch ('selected', function(nowSelected) {
    $scope.selectedValues = [];
    console.log(nowSelected)
    // this returns Undefined
    console.log('dddd')
    if (!nowSelected) {
        console.log("IFFFFFF");
        return;
    }
    angular.forEach ($scope.charactValue, function(val) {
        console.log(val);
        $scope.charactValue.push (val.id.toString());
    });
});

Answer №1

Consider including the attribute ng-multiple="true" within your select element.

Answer №2

In one of my previous projects, I implemented the following code snippet to achieve a similar functionality:

 <select multiple="multiple" name="selectedRoleId" ng-model="user.selectedRole" class="form-control">
      <option ng:repeat="role in roleList" value="{{role.Name}}">{{role.Name}}</option>
 </select>

Then, within the controller's submit function:

//Ensure $scope.user is declared to avoid undefined errors
$scope.user = {}; //declare above the function
//inside the function
$scope.submitForm=function() {
    var registeredUser = new models.register($scope.user);
};

You can access the selected values using $scope.user's selectedRole property.

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

The concept of bundling does not seem to be effective when it comes to

I have incorporated Angular controllers and other functionalities into my ASP.NET Web Forms application. In order to optimize the JS and CSS files, I am trying to utilize the built-in bundling provider from the System.Web.Optimization dll. However, I am en ...

Lit-translate displays a sequence of characters instead of providing a translated text

I'm currently using lit-translate to localize my "Elmish" TypeScript website into different languages. My setup includes webpack and dotnet. Within my index.ts file, I configure the translation like this: registerTranslateConfig({ lookup: (key, c ...

How can one effectively analyze a web page using client-side techniques to extract a vast number of words?

Is there a way to automatically transform keywords into links on a webpage when a specific script tag is added? I have around 25,000 keywords and I'm looking for the most efficient method to achieve this. I've attempted using basic JavaScript wi ...

Is there a way to retrieve a value from localStorage and use it to automatically set the selected option in a UL-based dropdown list upon page load

I have implemented a unique UL-based dropdown list that I discovered here (specifically the third model) as the foundation for a role-based selection box for my users. To enhance user experience, I am storing their role selection in localStorage so they do ...

Having trouble linking JavaScript files to an HTML file within a standalone Java application

Hello, I am currently working on a standalone Java application that runs on a particular port number. As part of my project, I am attempting to create a user interface using HTML which involves utilizing some external JavaScript files. In order to include ...

Waiting for a function to finish until a modal window is closed in ReactJS

I have a situation in my app where I need to display a pop-up after a form submission. I want the function to wait for the pop-up to be closed before continuing with the rest of the code execution. Here is the pseudo-code: const onSubmit = useCallback(asy ...

Using XMLHttpRequest to fetch a JSON object

Having trouble with returning an object from the getMine function in Javascript? Even though you try to print out the object, it keeps showing up as undefined. How can you successfully return the obj within this function? function getMine() ...

Is there a way to determine where a Javascript event originated from when it was triggered programmatically?

In my current debugging situation, I am investigating why pressing Enter on a submit button triggers a 'click' event on that same button. It appears that the click event is being fired programmatically, which is the expected behavior in the appli ...

Having trouble retrieving the value of an object and implementing a constant and static variable within a class

I have come across the following code: 'use strict'; const Request = require('request'); class CryptoKetHandlers { static async coins(ctx) { try { var CONTENT_TYPE = 'application/json'; ...

The select materialize suddenly displayed a double arrow icon

I'm currently using Materialize for my form page, but I've encountered an issue. I can't seem to figure out how the double arrow appeared on the select dropdown (refer to the photo I've attached). Is there a way to have just one arrow i ...

`NodeJS Compared to Static HTML`

I need to create a browser client for my Java Rest API and I'm considering the best approach with the least trade-offs. Should I use static HTML files with backbone to connect to the REST API and populate the data fields? Or should I opt for a NodeJ ...

What is the reason behind Visual Studio intellisense not displaying the methods of XMLHttpRequest objects?

Why am I unable to access the open and send methods of the XMLHttpRequest object in Visual Studio's Intellisense? var httprequest = new XMLHttpRequest(); httprequest. I cannot see the methods in Intellisense after the dot. ...

Firefox: repeated occurrences of style sheet in developer tools

I am currently managing a sample website with multiple linked style sheets at . One of these style sheet links needs to be toggled on and off, hence it includes a unique id: <link id="sketch" rel="stylesheet" type="text/css" ...

Sending information to the model within the ng-click event

Currently, I have a system in place where all articles from the database are displayed, along with a text search feature for easy navigation. <input ng-model="searchText" placeholder="Search for articles" class="search-text"> I am utilizing this se ...

Transmitting personalized information with Cylon.js and SocketIO

After making adjustments to my code based on the example provided here https://github.com/hybridgroup/cylon-api-socketio/tree/master/examples/robot_events_commands This is the complete server code, currently running on an Edison board. Everything functio ...

Deactivate the date when it reaches 8 in the current date count using ajax, php, and mysql

I want to prevent users from selecting a specific date after it has been chosen 8 times. Currently, when the date is selected for the 9th time, an alert box pops up. Instead of the alert box, I would like to disable that particular date selection altogethe ...

The span's onclick function seems to be malfunctioning

I am encountering an issue where the Onclick event is not triggering on a specific tag. Strangely, the same onclick event works perfectly fine when bound to an image element. I am currently developing a follow and unfollow feature using PHP and jQuery. How ...

What is the best way to retrieve and display the highest selected element in AngularJS?

Is it possible to set a maximum limit for selected elements in Angular? I have a multiple selection element where users can choose multiple items, but I want to restrict them to selecting only three items. When a button is clicked, a pop-up appears for the ...

Building a simple messaging platform with the power of Socket.io and Node.js

After following the guide at http://socket.io/get-started/chat/, I attempted to create a basic chat application. However, upon running npm install --save socket.io I encountered the error message below. How can I resolve this issue? npm WARN package.jso ...

Unable to execute redirect function in Next.js 14 application

I've been working on implementing basic authentication within a Next.js app, however I'm encountering issues with redirecting to the homepage from the auth.ts file. Below is a snippet of the code where I am implementing the loginForm: //loginForm ...