Transferring dynamic <select> values to a list demonstrates its worth

Question

Transferring dynamic <select> values to a list demonstrates its worth

Whenever the button is clicked, a new select option is added. On removal, the last member of the array is deleted. The goal now is to transfer the selected value to a list below.

This snippet showcases the code in question:

  $scope.langInput = {
    count: 3,
    values: [1, 2],
    add: function() {
        this.values.push(this.count);
        this.count += 1;
        console.log(this.values);
    },
    remove: function() {
        this.values.pop();
        this.count -= 1;
        console.log(this.values);
    }
};

Here's a working demo of the provided code. There's still an issue with moving the selected option to the <ol> list. Any tips would be greatly appreciated.

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

One way to write the code for a select element is like this:

<select ng-model="n.selected" ng-change="onChange(n.selected, $index)">

It's important to note that in this code snippet, the variable langInput.values must contain a list of objects and not integers.

$scope.langInput = {
        count: 3,
        values: [
          {
            id:1,
            selected: "eng"  
          },
          {
            id:2,
            selected: "eng"
          }
          ],
        add: function() {
            this.values.push({id:this.count,selected: "eng"});
            this.count += 1;
            console.log(this.values);
        },
        remove: function() {
            this.values.pop();
            this.count -= 1;
            console.log(this.values);
        }
    };

    $scope.onChange = function(value, index){
      $scope.langInput.values[index].selected = value;
    }

Check out the Demo Plunker here

Answer 2

One way to write the code for a select element is like this:

<select ng-model="n.selected" ng-change="onChange(n.selected, $index)">

It's important to note that in this code snippet, the variable langInput.values must contain a list of objects and not integers.

$scope.langInput = {
        count: 3,
        values: [
          {
            id:1,
            selected: "eng"  
          },
          {
            id:2,
            selected: "eng"
          }
          ],
        add: function() {
            this.values.push({id:this.count,selected: "eng"});
            this.count += 1;
            console.log(this.values);
        },
        remove: function() {
            this.values.pop();
            this.count -= 1;
            console.log(this.values);
        }
    };

    $scope.onChange = function(value, index){
      $scope.langInput.values[index].selected = value;
    }

Check out the Demo Plunker here

Transferring dynamic <select> values to a list demonstrates its worth

Answer №1

Similar questions

Arrange divs adjacent to each other without any gaps in between

Node.js client encounters ENOBUFS error due to excessive number of HTTP requests

I am unable to utilize the Web Share API for sharing a file within my React app written in TypeScript

Tips for displaying a removal option and eliminating an uploaded document

Tips for employing duplicated HTML on a webpage

What is the best way to load a model and save it to a variable for future use?

Having trouble getting ng-repeat to work properly alongside Bootstrap collapse?

Combining two ng-model inputs in Angular for seamless data integration

Difficulty with obtaining .responsetext in AJAX and PHP

The jQuery AJAX response consistently comes back empty

Menu toggle vanishes suddenly

What causes the appearance of an HTTP header error and how can we identify the bug?

Is it better to use scale.set() or simply increase the size of the model in Three.js?

Ways to create dynamic functionality with JavaScript

What is the best way to include multiple ng-repeats within a single ng-repeat?

Correct the positioning upon refreshing within a table containing multiple pages

Adding a border to the <area> element: A step-by-step guide

Implement a loading spinner for autocompletion by utilizing an array as data source instead of relying on an

Obtain the URL for making an asynchronous request using PHP and SQL

Encountering a "dependency resolution error" while deploying a React application with Parcel on Heroku