Question

我使用angular来绑定下拉列表以预览页面末尾的value和label：

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

在预览部分使用：

Study Type: {{studyType}}

显示所选的option。例如：选择临床试验时，输出为：

Study Type: 1

有没有办法让价值和标签打印在一起，如：

Study Type: 1 - Clinical Trials

Answer 1

请尝试以下方法
的控制器

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

预览部分

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

Answer 2

试试这个：

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

小提琴： http://jsfiddle.net/E9bU5/157/

注意：上述小提琴中的小问题，下拉值未显示。你可以试试这样的东西。

参考： http://www.angularjshub.com/examples/forms/select/

Answer 3

无需在$ scope变量中重新创建选项列表，我们可以通过创建组合框的“id”来实现这一点。

让我们试试这个：

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

使用角度

3 个答案: