前端之家收集整理的这篇文章主要介绍了
anularjs的select回显,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script >
/**
* 回显select
* */
angular.module("myApp",[]).controller("myControl",["$scope",function($scope){
$scope.cardTypeData = [{
'id': "0",'cardtype': '大话西游'
},{
'id': "1",'cardtype': '肖申克'
},{
'id': "2",'cardtype': '喜剧子王'
}
]
$scope.model = { //定义
'c_type':'','code_Type':''
}
var type = '2';//如果是后台传过来的数据
$scope.model.c_type = type;
/*
* 注意: 在数组中cardTypeData定义的数据类型,需要和后台传过来的type数据类型一致,否则不显示
* */
$scope.model.code_Type = '生产许可证编号'; //第二种不加循环的回显
}
]);
</script>
</head>
<body ng-app="myApp" ng-controller="myControl">
<label class="control-label col-md-2">证件类型:</label>
<div class="col-md-2">
<select class="form-control" ng-model="model.c_type" ng-options="item.id as item.cardtype for item in cardTypeData" name ="c_type">
<!--<option value ="0">健康证</option>-->
<!--<option value ="1">食品安全员</option>-->
<option value="">-- 请选择 --</option>
</select>
</div>
<div class="col-md-2">
<select class="form-control " ng-model="model.code_Type" name="code_Type" required>
<option value ="">-请选择类型-</option>
<option value ="生产许可证编号">生产许可证编号</option>
<option value ="经营许可证编号">经营许可证编号</option>
<option value ="餐饮许可证编号">餐饮许可证编号</option>
<option value ="企业名称">企业名称</option>
</select>
</div>
</body>
</html>
原文链接:https://www.f2er.com/angularjs/146614.html