21angular1单选框、复选框、下拉框、下拉表格

最新推荐文章于 2021-12-06 22:18:58 发布

weixin_30853329

最新推荐文章于 2021-12-06 22:18:58 发布

阅读量647

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10965981.html

版权

一、单选框与复选框在点击事件发生时的区别
1、单选框在点击后：呈现选中状态，把ng-value赋值给ng-model(初始化时，如果两者都有默认值，相等则选中);
2、复选框在点击后：呈现相反状态，把ng-checked赋值给ng-model(初始化时，如果两者都有默认值，那么前者将覆盖后者);

二、下拉框
例一：反常用法(select和option都由后台决定)
front==='管理员'?解决sendBackValue初始化值；
在option被点击后，系统把ng-value的值赋值给sendBackValue；
ng-bind只负责前端展示。

<select ng-model="sendBackValue">
<option ng-repeat="(back, front) in allData" ng-value="back" ng-bind="front" ng-init="front==='管理员' ? sendBackValue=back : '' "></option>
</select>

例二：常规用法(select和option都由前端决定)
select的初始状态
如果$scope.myLog.resultDo===$scope.resultDo[index].back,
那么select的初始状态为:$scope.resultDo[index].front。

<select ng-model="myLog.resultDo" ng-options="item.back as item.front for item in resultDo" ng-change="option()"></select>

$scope.myLog={resultDo:"全部后台"};
$scope.resultDo = [{ back: '全部后台', front: '全部前端' },{ back: '已读后台', front: '已读前端' },{ back: '未读后台', front: '未读前端' }];

例三：变态用法(select由后台决定，option由前端决定)


三、angular1单选框、复选框、下拉框三者联合案例展示

<!DOCTYPE html>
<html lang="en" ng-app="myModel">
<head>
    <meta charset="UTF-8">
    <title>联合案例展示</title>
</head>
<body>
<div ng-controller="firstCtrl">
    <input type="checkbox" ng-checked="checkboxCheck" ng-model="checkboxModel" ng-click="checkbox()">
    <input type="radio" name="towRadio" ng-model="yesOrNo" ng-value="'man'" ng-click="selectRadio()">
    <input type="radio" name="towRadio" ng-model="yesOrNo" ng-value="'woman'" ng-click="selectRadio()">
    <select ng-model="myLog.resultDo" ng-options="item.back as item.front for item in resultDo" ng-change="selectOption()"></select>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script>
    var app = angular.module('myModel', []);
    app.controller('firstCtrl', function ($scope) {
        $scope.myLog={resultDo:"全部后台"};
        $scope.resultDo = [{ back: '全部后台', front: '全部前端' },{ back: '已读后台', front: '已读前端' },{ back: '未读后台', front: '未读前端' }];
        $scope.yesOrNo = 'man';
        $scope.checkboxCheck = false;/*永远不变*/
        $scope.checkboxModel = true;/*交替改变*/
        $scope.checkbox = function () {
            console.log($scope.checkboxCheck);
            console.log($scope.checkboxModel)
        };
        $scope.selectRadio = function () {
            console.log($scope.yesOrNo)
        };
        $scope.selectOption = function () {
            console.log($scope.myLog.resultDo)
        };
    });
</script>
</body>
</html>

四、下拉表格
1、html

<div class="table">
    <div>
        <table>
            <tr>
                <td class="index"> 序号 </td>
                <td class="beginTime"> 开始时间 </td>
                <td class="ipAddress">IP地址 </td>
                <td class="port">端口 </td>
                <td class="protocolName"> 协议名称 </td>
                <td class="detail"> 详情 </td>
            </tr>
        </table>
    </div>
    <div ng-repeat="item in list track by $index">
        <table>
            <tr>
                <td class="index" style="position: relative">
                    <dir-icon name="item.cust_detail_show?'guolv-12_6-down':'guolv-12_6-right'"
                        ng-click="clickDetail(item)" ng-show="item.isMaster==='1'"
                        style="cursor: pointer;position:absolute;left:10%;top:16px;" width="14px"
                        height="14px">
                    </dir-icon>{{$index+1}}
                </td>
                <td class="beginTime" ng-bind="item.startTime"> </td>
                <td class="ipAddress" ng-bind="item.IP"> </td>
                <td class="port" ng-bind="item.port"> </td>
                <td class="protocolName" ng-bind="item.protocolType"> </td>
                <td class="detail text-primary" ng-click="detail_alert(item)"
                    style="cursor: pointer;color:blue">详情 </td>
            </tr>
        </table>
        <table ng-show="item.cust_detail_show" style="width:95%;margin: 0 auto;background: #ddd;">
            <tr ng-repeat="liInner in item.cust_detail_list track by $index">
                <td class="index" ng-bind="$index+1"></td>
                <td class="beginTime" ng-bind="liInner.startTime"></td>
                <td class="ipAddress" ng-bind="liInner.IP" class="item"></td>
                <td class="port" ng-bind="liInner.port"></td>
                <td class="protocolName" ng-bind="liInner.protocolType"></td>
                <td class="detail text-primary" style="cursor: pointer;color:blue"
                    ng-click="detail_alert(liInner)">详情
                </td>
            </tr>
        </table>
    </div>
</div>

2、css

.table{
    margin: 10px 0;
}

.table table{
    width:100%;
}
.table table tr td {
    text-align: center;
    border:1px solid #dee2e6;
    border-collapse: collapse;
    height:40px;
}

.table table tr td.index {
    width:10%;
}

.table table tr td.beginTime {
    width:25%;
}

.table table tr td.ipAddress {
    width:25%;
}

.table table tr td.port {
    width:15%;
}

.table table tr td.protocolName {
    width:15%;
}

.table table tr td.detail {
    width:10%;
}

3、js

$scope.id="";
$scope.imgClick=function (id) {
    if($scope.id===id){
        $scope.id="";
        return;
    }
    $scope.id=id;
};

4、效果图
![图片描述](attimg://article/content/picture/201810/31/092509x0q66m95oc56s0mb.png)

附：时间option

$scope.studyTimeOptions=[
    { back: '60', front: '1分钟' },
    { back: '180', front: '3分钟' },
    { back: '300', front: '5分钟' },
    { back: '600', front: '10分钟' },
    { back: '900', front: '15分钟' },
    { back: '1200', front: '20分钟' },
    { back: '1800', front: '30分钟' },
    { back: '3600', front: '1小时' },
    { back: '7200', front: '2小时' },
    { back: '14400', front: '4小时' },
    { back: '28800', front: '8小时' },
    { back: '43200', front: '12小时' },
    { back: '86400', front: '1天' },
    { back: '259200', front: '3天' },
    { back: '604800', front: '1周' },
    { back: '1209600', front: '2周' },
    { back: '2592000', front: '1个月' }
];

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10965981.html

weixin_30853329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
21angular1单选框、复选框、下拉框、下拉表格

一、单选框与复选框在点击事件发生时的区别1、单选框在点击后：呈现选中状态，把ng-value赋值给ng-model(初始化时，如果两者都有默认值，相等则选中);2、复选框在点击后：呈现相反状态，把ng-checked赋值给ng-model(初始化时，如果两者都有默认值，那么前者将覆盖后者);二、下拉框例一：反常用法(select和option都由后台决定)front==='管理员'?解决sendB...
复制链接

扫一扫