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.
3 answers
solution1
0 2014-12-30 14:09:15
Have you tried using ng-options instead? My guess is that ng-model probably requires that on the select.
solution2
0 2014-12-30 14:23:46
Try this:
<select class="form-control"
id="type"
name="type"
ng-model="definition.clazz"
ng-options="option in ['PrimitiveType','EnumerationType']">
</select>
solution3
0 2014-12-30 14:35:45
@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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.