一、单选框与复选框在点击事件发生时的区别
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="/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、效果图
附：时间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个月' }];
