首页 > 其他分享 >anularjs的select回显

anularjs的select回显

时间:2023-02-06 20:37:36浏览次数:36  
标签:回显 -- cardtype select scope type id anularjs


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


标签:回显,--,cardtype,select,scope,type,id,anularjs
From: https://blog.51cto.com/u_15955675/6040436

相关文章

  • angularjs中日期的回显
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"......
  • 固定宽度的select下拉列表option选项显示不全的解决办法
    昨天因为工作需要,研究了下select下拉列表,发现一段JS并进行了修改,因为源代码存在一个bug,所以我进行了稍微修改并注明,希望能对大家有所帮助!固定宽度的......
  • Select2的使用
    Select2的使用Select2是一款基于JQuery的下拉列表插件,主要用来优化select,支持单选和多选,同时也支持分组显示、列表检索、远程获取数据等众多好用的功能项目地址:https://s......
  • ElementUI中el-table-column的type为selection时选择框旁边有个点
    场景使用el-table的多选框时,el-table-column的type为selection时,显示为勾选框。但是会在勾选框旁边显示一个实心的小点。 注:霸道的程序猿获取编程相关电子书、教程推送与......
  • (转)深入golang -- select
    原文:https://zhuanlan.zhihu.com/p/509148906老规矩相信大家已经知道select应用的特性,这里主要是介绍select的底层原理。select底层原理主要分为两部:select语句......
  • (转)golang学习之--select--case 原理
    原文:https://blog.csdn.net/cyb_17302190874/article/details/108244683Go的select语句是一种仅能用于channl发送和接收消息的专用语句,此语句运行期间是阻塞的;当select中......
  • cmd - bat文件如何关闭回显
    bat文件是dos下的批处理文件,可以一次性执行多条dos命令,其扩展名为.bat或.cmd,通过双击该文件或者在cmd窗口中输入该文件名可以在cmd窗口中按文件中的顺序执行多条dos命令。​......
  • SQL笔记-select 1与select null
    第一次见到select1和selectnull,有些好奇,在网上找了下相关资料,特此记录研究一下。假设现在有两张表test和seckill,test是一张没有记录的空表,seckill表里则有4条记录;我是在My......
  • 【五期李伟平】CCF-A(ICML'21)Privacy-Preserving Feature Selection with Secure Multi
    Li,X.,R.Dowsley,andMDCock."Privacy-PreservingFeatureSelectionwithSecureMultipartyComputation.",10.48550/arXiv.2102.03517.2021.  当前PPML......
  • kubernetes nodeSelector部署节点选择
    1.文档https://kubernetes.io/zh-cn/docs/concepts/scheduling-eviction/assign-pod-node/ 2.说明 nodeSelector 是节点选择约束的最简单推荐形式。你可以将 n......