CODEWITHSUNDEEP
htmlangularjs
Syafiq Azwan
Syafiq Azwan

Reputation: 178

displaying value and label on dropdown using angular

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

Upvotes: 0

Views: 4904

Answers (3)

Ashish Saxena
Ashish Saxena

Reputation: 41

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>

Upvotes: 0

Nagarjuna Reddy
Nagarjuna Reddy

Reputation: 4195

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/

Upvotes: 0

Sabarish
Sabarish

Reputation: 531

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}}

Upvotes: 1

Related Questions