Implementing a dynamic dropdown menu using AngularJS and jQuery

Question

Implementing a dynamic dropdown menu using AngularJS and jQuery

Issue -

I'm attempting to create a dynamic label and textarea option where:

If a user picks "Work," then when they click the "+" icon, the next selection will only include ["Cell", "Home", "Fax"].
Then if "Home" is selected, on clicking the "+" icon from the second selection, the following options will only be ["Cell", "Fax"] and so forth.

However, I am struggling because my first array is decreasing and no data is appearing in the subsequent select options.

Please let me know what mistake I might be making and any suggestions on how to correct it are also appreciated.

javascript jquery html css angularjs

Answer 1

Answer №1

It seems like your $scope.temp variable contains the right number of objects. The issue might be arising from how you are generating the new select options after clicking the plus button. Instead of attempting to create the element using a jQuery constructor, consider utilizing a custom directive for better functionality.

Using a custom directive could provide a more efficient solution in this scenario.

Answer 2

It seems like your $scope.temp variable contains the right number of objects. The issue might be arising from how you are generating the new select options after clicking the plus button. Instead of attempting to create the element using a jQuery constructor, consider utilizing a custom directive for better functionality.

Using a custom directive could provide a more efficient solution in this scenario.

Answer 3

Answer №2

Shift ng-click over to the <a> tag, while also incorporating ng-model="target" into the textarea:

<select ng-model="contact"
        ng-options="selOption.value as selOption.name for selOption in selOptions"
        ng-init="contact = selOptions[0].value"></select>
<textarea ng-model="target"></textarea>
<a href="#" ng-click="shiftArr()"><img src="..." id="plusbutton"></a>

Within the controller, set up the initialization of $scope.target, and make necessary adjustments to $scope.shiftArr:

$scope.target = '';

$scope.shiftArr = function() {
    var arrVal = $scope.contact;
    var newArr = [];
    newArr = $scope.selOptions;
    for (var i = 0; i < newArr.length; i++) {
        if (newArr[i].value === arrVal) {
            $scope.target = $scope.target + newArr[i].name + '\n'; 
            var index = arrVal - 1 ;
            newArr.splice(index, 1);
            $scope.temp = newArr;
        }
    }
};

Answer 4

Shift ng-click over to the <a> tag, while also incorporating ng-model="target" into the textarea:

<select ng-model="contact"
        ng-options="selOption.value as selOption.name for selOption in selOptions"
        ng-init="contact = selOptions[0].value"></select>
<textarea ng-model="target"></textarea>
<a href="#" ng-click="shiftArr()"><img src="..." id="plusbutton"></a>

Within the controller, set up the initialization of $scope.target, and make necessary adjustments to $scope.shiftArr:

$scope.target = '';

$scope.shiftArr = function() {
    var arrVal = $scope.contact;
    var newArr = [];
    newArr = $scope.selOptions;
    for (var i = 0; i < newArr.length; i++) {
        if (newArr[i].value === arrVal) {
            $scope.target = $scope.target + newArr[i].name + '\n'; 
            var index = arrVal - 1 ;
            newArr.splice(index, 1);
            $scope.temp = newArr;
        }
    }
};

Implementing a dynamic dropdown menu using AngularJS and jQuery

Answer №1

Answer №2

Similar questions

Is the data set in stone, or is it just the API data that can

The system encountered an error stating that the required component "Footer" in the main directory was not located in the specified node_modules

.mounted middleware's redirect() function fails when using a relative destination

Ways to toggle the visibility of a div based on checkbox changes in Angular:

Can anyone share tips on implementing animations during transitions when using $location.path for redirection in AngularJS?

Screen proportions altered - Background image disappearing | Unusual occurrences |

What is the best way to add a background to text that has been wrapped?

Align the HTML element to the right edge of its sibling element that is centered on the

Angular 4 with Typescript allows for the quick and easy deletion of multiple selected rows

Tips on revealing concealed information when creating a printable format of an HTML document

Converting an array object into a specific format: step-by-step guide

Switch between classes based on the query using the Ajax response

Guide to using vite-plugin-rewrite-all in conjunction with Quasar for Vue 3 - or alternative method to enable periods in paths

I am looking to switch the input border-bottom color to blue when the input field is focused or has valid content

Customizing the appearance of pagination numbers in ReactJS by altering their color

Generating random numbers for ids in C# by clicking a button

Implement a feature that adds a circle element when an image is clicked in a React application

Can we expect every bullet point to be consistently indented at precisely 1.8em?

Highchart tip: How to create a scrollable chart with only one series and update the x-axis variable through drilldown

Discovering a precise object from an array in MongoDB