displaying value and label on dropdown using angular

Question

Im using angular to bind a dropdown to preview the value and label at the end of a page:

<select name="studyType" ng-model="studyType" class="form-control">
    <option value="1"> Clinical Trials </option>
    <option value="2"> Compassionate </option>
    <option value="3"> Other </option>
</select>

at the preview section im using:

Study Type: {{studyType}}

to display the selected option. For example: when Clinical Trials is selected, the output is:

Study Type: 1

Is there any way to make the value and the label printed together like:

Study Type: 1 - Clinical Trials

Sabarish · Accepted Answer · 2015-08-18 04:38:52Z

1

Please try the below method
Controller

  $scope.lists = [
    {name: 'Clinical Trials', value : 1},
    {name: 'Compassionate', value : 2},
    {name: 'Other', value : 3}
  ]

HTML:

<select ng-model="studyType" ng-options="item.value as item.name for item in lists">
</select>

Preview Section

Study Type: {{studyType.value}} - {{studyType.name}}

answered Aug 18, 2015 at 4:38

Sabarish

5415 silver badges18 bronze badges

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

Comments

Nagarjuna Reddy · Accepted Answer · 2015-08-18 05:57:00Z

0

Try this:

<select ng-model="studyType" ng-options="item for (name, value) in lists">    
  </select>

Fiddle: http://jsfiddle.net/E9bU5/157/

NOTE : Small issue in the above fiddle, dropdown values are not showing up. You can try something like that.

Ref: http://www.angularjshub.com/examples/forms/select/

answered Aug 18, 2015 at 5:57

Nagarjuna Reddy

4,19514 gold badges47 silver badges87 bronze badges

Comments

Ashish Saxena · Accepted Answer · 2016-01-12 08:36:48Z

without recreating option list in $scope variable, we can achieved this by creating "id" of combobox.

let's try this:

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">   
   var app = angular.module('selectCbxApp', []);
   app.controller('cbxCntrl', function() 
		{
		   var self = this;
		   self.selectedStudyType = "";
	       self.studyTypeChange = function()
	       {	    	   
	    	  var studyCbxObj = document.getElementById("studyCbxId");
	    	  self.selectedStudyType = studyCbxObj.options[studyCbxObj.selectedIndex].value + "-" + studyCbxObj.options[studyCbxObj.selectedIndex].text;
	       }	    
	});   
</script>

<body ng-app="selectCbxApp">  
   <div ng-controller="cbxCntrl as cbxCntrlAs">       
	   Study Type:{{cbxCntrlAs.selectedStudyType}}</br>
       <select id="studyCbxId" class="form-control" ng-model="studyType" ng-change="cbxCntrlAs.studyTypeChange()">
		    <option  value="1" > Clinical Trials </option>
		    <option  value="2" > Compassionate </option>
		    <option  value="3" > Other </option>
	   </select>
   </div>    
</body>
</html>

Collectives™ on Stack Overflow

displaying value and label on dropdown using angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related