Select value to var in AngularJs

Question

In Angular.js - How to check the value of the selected option on a Dropdown?

I have a dropdown menu, and a plus button next to it.

When the button is pressed a function triggers. How do I get "selected" into a var?

({{selected}} works in html, but I want this value in JS)

>  <select ng-options="key as key for (key, prop) in
> vm.schema.properties" ng-model="selected"">
>     </select>  //the dropdown


<p id="plusbutton">  //the add button
<div class="btn btn-info btn-sm" ng-model="selected" ng-click="vm.addMappingField()">
<span class="glyphicon glyphicon-plus"></span>
</div>
</p>

Javascript/Angular:

    function addMappingField() {

       var item = {{selected}}; //Here should be the value of the dropdown

        vm.mappingFields.push({
            destination: "item",
        });
    };

aseferov · Accepted Answer · 2019-01-10 14:44:18Z

1

You can pass selected model as paramter of addMappingField function or you can access it directly in controller like $scope.selected

<div class="btn btn-info btn-sm" ng-click="vm.addMappingField(selected)">


function addMappingField(selected) {

   var item = selected //Here should be the value of the dropdown

    vm.mappingFields.push({
        destination: "item",
    });
};

answered Jan 10, 2019 at 14:44

aseferov

6,4233 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SNT Over a year ago

that comes out as "selected undefined"

SNT Over a year ago

Nevermind i fixed it! thank you. I tried this already but i guess i got the syntax wrong or double defined something. Thanks!

Marcus Höglund · Accepted Answer · 2019-01-10 14:53:06Z

1

First of, you are setting the selected as the NgModel on two different elements, it should only be set on the select tag.

Secondly, connect the selected model to the vm and then just refere it in the addMappingField() method in the controller

View

<select ng-options="key as key for (key, prop) in vm.schema.properties" ng-model="vm.selected"">
</select> 

<p id="plusbutton">
    <div class="btn btn-info btn-sm" ng-click="vm.addMappingField()">
        <span class="glyphicon glyphicon-plus"></span>
    </div>
</p>

Controller

function addMappingField() {

   var item = vm.selected;

    vm.mappingFields.push({
        destination: "item",
    });
};

answered Jan 10, 2019 at 14:53

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

4 Comments

SNT Over a year ago

just add "vm.selected = selected;" to the vm?

Marcus Höglund Over a year ago

@SNT As the vm already is defined, you don't need to set the vm.selected yourself. the ng-model will set the value to the selected option

SNT Over a year ago

I understand, thank you Sir. both answers work but i suppose using vm in stead of scope would be a better way to go

Marcus Höglund Over a year ago

@SNT Np, yepp. Either use scope or vm. dont mix the two :)

CTS_AE · Accepted Answer · 2019-01-14 10:19:15Z

0

Remove ng-model="selected" in the dom. <div class="btn btn-info btn-sm" ng-click="vm.addMappingField()">

If your using scope as vm makes sure these changes in your code.

 function addMappingField() {

   var item = vm.selected //Here should be the value of the dropdown

    vm.mappingFields.push({
        destination: item,
    });
};

OR if using $scope in your controller change to

var item = $scope.selected

edited Jan 14, 2019 at 10:19

CTS_AE

15.1k9 gold badges71 silver badges69 bronze badges

answered Jan 10, 2019 at 15:07

Krishnamraju K

1211 gold badge2 silver badges8 bronze badges

Collectives™ on Stack Overflow

Select value to var in AngularJs

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related