How to get the selected value in select?

Question

I am working on a angularjs form. I want to pass definition.clazz to a js function. In the controller, i have a js function like :

$scope.createData=function(clazz){
// do stuff
}

Here is the snippet of form :

<select  class="form-control" id="type" name="type" ng-model="definition.clazz">
    <option value="PrimitiveType" 
            ng-selected="type.type=='PRIMITIVE'">
        PrimitiveType
    </option>
    <option value="EnumerationType"
            ng-selected="type.type=='ENUM'">
        EnumerationType
    </option>
</select> 
<button type="button" 
        class="btn btn-primary"
        ng-click="createData(definition.clazz)">
    Create Data   
</button>

When I click to create Data button, the ng-model is not set. Even when I print definition.clazz in console log. How to get the select value of select? Thanks.

Try definining your model first in your controller: `$scope.definition = {}` — devqon, Dec 30 '14 at 14:13
For an angularish way to do it, check this question: http://stackoverflow.com/questions/14386570/getting-the-ng-object-selected-with-ng-change — avenet, Dec 30 '14 at 14:18
@avenet thanks for the links but i my case it is not about get the changed value. I want to retrieve selected value (done in another view) display in the current view. — Pracede, Dec 30 '14 at 14:22
i see you put `ng-selected` here. dont get confused on it, this is only to add `selected` attribute to the DOM but not changing the model at all. which means you see the view change but not model. — hjl, Dec 30 '14 at 14:37

score 0 · Answer 1 · answered Dec 30 '14 at 14:09

0

Have you tried using ng-options instead? My guess is that ng-model probably requires that on the select.

answered Dec 30 '14 at 14:09

Meligy

35,654
11
85
109

score 0 · Answer 2 · edited Dec 30 '14 at 14:32

0

Try this:

<select class="form-control" 
          id="type" 
          name="type" 
          ng-model="definition.clazz" 
          ng-options="option in ['PrimitiveType','EnumerationType']">  

</select>

edited Dec 30 '14 at 14:32

augustoccesar

658
9
30

answered Dec 30 '14 at 14:23

Abdul23

5,265
2
16
23

score 0 · Answer 3 · edited May 23 '17 at 12:05

@Pracede, is this the working solution that you want to achieve?

The value of ng-model is shown in console:

 

       var app = angular.module("app", []).controller('appCtrl', ['$scope',
          function($scope) {
            //$scope.type ={type="PRIMITIVE"}; // the tricky part?
            
            $scope.type = {};
            $scope.type.type="";
               
            $scope.createData = function(clazz) {
    if(clazz==undefined)
      {
        console.log("SELECT THE TYPE");
        return;
      }              

if(clazz=='PrimitiveType')
              {
                 $scope.type.type='PRIMITIVE';
                 console.log(clazz +  ' ' + $scope.type.type); 
              }
              else
              {
                $scope.type.type='ENUM';
                console.log(clazz +  ' ' + $scope.type.type);
              }    
    }
      }
    ]);

   

  <!DOCTYPE html>
    <html ng-app="app"> 
    <head>
      <title></title>
    </head>
    
    <body ng-controller="appCtrl"> 
      <select class="form-control" id="type" name="type" ng-model="definition.clazz">
<!--<option value="PrimitiveType" ng-selected="type.type=='PRIMITIVE'">PrimitiveType</option>
    <option value="EnumerationType" ng-selected="type.type=='ENUM'">EnumerationType</option>-->
        <option value="PrimitiveType">PrimitiveType</option>
        <option value="EnumerationType">EnumerationType</option>
      </select>
      <button type="button" class="btn btn-primary" ng-click="createData(definition.clazz)">
        Create Data
      </button>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </body>   
    </html>

EDIT: You can look these similar problems on SO: How does ng-selected work? Updating model with ng-options and ng-selected

but this is my understanding and one of solutions of your problem.

You can change the type with value inside the option and set the type depending on value in controller's function. So, there is no need to to use ng-selected (my opinion in this case).

I hope this addition will push you forward.

I edit your code. But i don't see what is different with my code. — Pracede, Dec 30 '14 at 14:51
Why do you want to use ng-selected? I cant' see the reason for using it... P.S. I didn't change anything, just set the working structure... — arman1991, Dec 30 '14 at 14:56
Can you put some other example to see how that works, because I can't imagine what are you meaning about "people can change the value" - you are also changing it by selecting the options too? — arman1991, Dec 30 '14 at 15:11
I say i use select to let people change the type so they can move from Primitive to enumeration — Pracede, Dec 30 '14 at 15:13
I made some additions and corrections. Hope it will be helpfull. — arman1991, Dec 30 '14 at 21:50

How to get the selected value in select?

3 Answers3