anularjs的select回显

最新推荐文章于 2023-08-03 17:54:02 发布

醉小义

最新推荐文章于 2023-08-03 17:54:02 发布

阅读量454

点赞数

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/qq_30638831/article/details/76448508

版权

angularjs 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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