19、angular1之pass-word组件、input-select组件 、only-select组件（两种）、on-off组件、layui中的datetime示例、京东购物车、两种作用域绑定、
2024/5/5 2:18:53
19、angular1之pass-word组件、input-select组件 、only-select组件（两种）、on-off组件、layui中的datetime示例、京东购物车、两种作用域绑定、两种函数传递
一、pass-word组件(自定义密码输入框，可预览)
使用场景：修改密码时，对密码进行多方位验证，并显示验证结果。
<!DOCTYPE html>
<html lang="en" ng-app="myModel">
<head><meta charset="UTF-8"><title>passWord</title><script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.6.2/angular.js"></script>
</head>
<body><div ng-controller="thisCtrl"><pass-word label-width="150" is-must-fill="true" label-text="原密码" this-type="password" placeholder="原密码" is-disabled="false"self-show='pastShow'is-past-input='true' self-data="oldPassword" verify="verify" ></pass-word><pass-word label-width="150" is-must-fill="true" label-text="输入新密码" this-type="password" placeholder="输入新密码" is-disabled="false" is-first-input='true' key-of-reg-exp="simplePassword" self-data="params.newPassword" sibling-data="newPasswordSecond" one-tip="oneTip" many-tips="manyTips"self-show='selfShow'sibling-show='siblingShow'></pass-word><pass-word label-width="150" is-must-fill="true" label-text="再次输入新密码" this-type="password" placeholder="再次输入新密码" is-disabled="false" key-of-reg-exp="simplePassword" self-data="newPasswordSecond" sibling-data="params.newPassword" one-tip="oneTip" many-tips="manyTips" self-show='siblingShow'sibling-show='selfShow'></pass-word> </div>
</body>
</html>
<script>var app = angular.module('myModel', []);app.controller('thisCtrl', function ($scope) {$scope.params = {};//发给后台$scope.pastShow = {isShowOneTip:false,isGreenOneTip:false,isShowManyTips:false,};$scope.selfShow = {isShowOneTip:false,isGreenOneTip:false,isShowManyTips:false,};$scope.siblingShow = {isShowOneTip:false,isGreenOneTip:false,isShowManyTips:false,};$scope.oneTip = {//由当前页传至本组件success: '自定义_输入符合要求！',empty: '自定义_该项不能为空！',different: '自定义_两次密码输入不一致！',formatError: '自定义_输入不符合要求，请输入以字母开头的4-24个字符！'};$scope.manyTips= ['密码要求：','1.必须包含：数字','2.必须包含：字母','3.必须包含：小写字母','4.必须包含：大写字母','5.必须包含：下划线',];$scope.oldPassword= '';$scope.params.newPassword='';$scope.newPasswordSecond= '';$scope.verify = function() {//把原密码告诉后台，根据后台判断结果，决定是否继续验证return true}});app.directive('passWord', function () {var html = `<div style="display:flex;align-items:center"><div ng-style="{width:(labelWidth||130)+'px'}" style="text-align:right;margin-right:10px;"><span ng-show="isMustFill" style="color:red;">*</span><label ng-bind="labelText||'密码'"></label></div><div style="padding:10px 0; position:relative;"><input type="{{ thisType ? thisType : 'text' }}" ng-model="selfData" placeholder="{{placeholder||''}}" ng-disabled="isDisabled" ng-focus="focus()" ng-change="changeOrBlur()" ng-blur="changeOrBlur()" ng-trim="false" style="width:290px;height:30px"><img src="{{servicePicture.eyeClose}}" ng-click="isShowEyeOpen=true;thisType='text'" ng-show="!isShowEyeOpen" style="width:14px;height:14px;position:absolute;right:10px;top:20px;cursor:pointer;padding:5px;"> <img src="{{servicePicture.eyeOpen}}" ng-click="isShowEyeOpen=false;thisType='password'" ng-show="isShowEyeOpen" style="width:14px;height:14px;position:absolute;right:10px;top:20px;cursor:pointer;padding:5px;"></div><div style="position:relative"><div ng-show="selfShow.isShowOneTip"><img src="{{selfShow.isGreenOneTip ? servicePicture.correct : servicePicture.error}}" style="width:14px;height:14px;position:relative;left:5px;"><span ng-bind="singleTipText" ng-style="selfShow.isGreenOneTip?{ \'color\':\'green\'}:{\'color\':\'red\'}" style="position:relative;left:5px;">></span></div> <div ng-show="selfShow.isShowManyTips && manyTips.length>0" style="position:absolute;top:0;display:flex"><img src="{{servicePicture.triangle}}" style="width:14px;height:14px;position:relative;z-index:3;left:5px;"><div style="width:200px;border:1px solid #DCDCDC;position:relative;top:-5px;left:3px;padding:5px;"><div ng-repeat="li in manyTips" ng-bind="li"></div></div></div></div></div>`;return {restrict: 'E',template: html,scope: {//以下是16种配置项。这是输入框组件，适用于密码输入、普通输入(isPastInput/isFirstInput:true)、旁边提示和弹窗提示。labelWidth: '@labelWidth',//标签宽度labelText: '@labelText',//标签文字placeholder: '@placeholder',//输入框内提示文字thisType: '@thisType',//输入框类型（文字或密码）keyOfRegExp: '@keyOfRegExp',//会用到的正则isMustFill: '=isMustFill',//该项是否必填isDisabled: '=isDisabled',//该项是否禁用isPastInput: '=isPastInput',//该项是不是原密码xxxxxxxxxxxisFirstInput: '=isFirstInput',//该项是不是第一次输入新密码xxxxxxxxxxxxselfData: '=selfData',//自身数据============siblingData: '=siblingData',//兄弟数据===============oneTip: '=oneTip',//单条提示manyTips: '=manyTips',//多条提示selfShow: '=selfShow',//自身的提示是否显示出来============siblingShow: '=siblingShow',//兄弟的提示是否显示出来=============verify: '=verify',//verify是函数，但按照变量传进来更好xxxxxxxxxxx},replace: true,controller: function ($scope, serviceRegExp, servicePicture) {$scope.servicePicture = servicePicture;$scope.inputChange = function (params, message) {var params = params;var config = {init: [false, false, false],focus: [false, false, true],empty: [true, false, false],formatError: [true, false, false],different: [true, false, false],wrong: [true, false, false],success: [true, true, false],};$scope.selfShow.isShowOneTip = config[params][0];$scope.selfShow.isGreenOneTip = config[params][1];$scope.selfShow.isShowManyTips = config[params][2];$scope.singleTipText = ($scope.oneTip && $scope.oneTip[params]) || message;};$scope.focus = function () {if($scope.isPastInput){$scope.inputChange('init');return}if($scope.isFirstInput){$scope.siblingData='';$scope.siblingShow = {isShowOneTip:false,isGreenOneTip:false,isShowManyTips:false,};}$scope.inputChange('focus');};$scope.changeOrBlur = function () {if ($scope.isMustFill && $scope.selfData=="") {//判断该项是否可以为空$scope.inputChange('empty', '该项不能为空！');return}if ($scope.keyOfRegExp && !(serviceRegExp[$scope.keyOfRegExp].test($scope.selfData))) {$scope.inputChange('formatError', '格式错误！');return}if (!$scope.isPastInput && !$scope.isFirstInput && $scope.selfData != $scope.siblingData) {$scope.inputChange('different', '两次密码输入不一致！');return}if(angular.isFunction($scope.verify) && !$scope.verify()){//验证原密码是否正确$scope.inputChange('wrong', '原密码输入错误！');return};$scope.inputChange('success', '输入符合要求！');};},link: function (scope, ele, attrs) {}};});app.factory('serviceRegExp', function () {return {simplePassword: /^[a-zA-Z][a-zA-Z0-9]{4,24}$/,//简单密码验证，以大小写字母开头，由大小写字母和数字构成的，共5-25位的密码complexPassword: /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*?_|~=+\-<>[{}/\'\":;,.\]*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*?_|~=+\-<>[{}/\'\":;,.\]*]+$)(?![\d!@#$%^&*?_|~=+\-<>[{}/\'\":;,.\]*]+$)[a-zA-Z\d!@#$%^&*?_|~=+\-<>[{}/\'\":;,.\]*]{6,25}$/,//复杂密码验证，同时包含字母、数字、特殊符号如!@#$%^&*?_|~=+\-<>[{}/\'\":;,.\]ipFrom0To255: /^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)$/,//ip地址验证，从0.0.0.0~255.255.255.255portFrom0To65535:/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/,mac:/^[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}$/,mobilePhone: /^1[3456789]\d{9}$/,//手机号码验证，中国大陆numberNotLimit: /^(0|[1-9][0-9]*)$/,//0或非0开头的数字numberWithLimit: /^(0|[1-9][0-9]{3,4})$/,//0或非0开头的数字4-5位emailNotLimit: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,//邮箱验证chineseCharacters: /^[\u4e00-\u9fa5]{0,}$/,//汉字验证blankSpace: /^\s*$/ //零到多个空格};});app.factory('servicePicture', function () {return {eyeClose: 'data:image/png;base64,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',eyeOpen: 'data:image/png;base64,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',correct: 'data:image/png;base64,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',error: 'data:image/png;base64,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',triangle: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAYAAAD+MdrbAAAAAXNSR0IArs4c6QAAAvpJREFUSA2tl7uLE1EUxmcmk6cJ2WTzQDBBBGEVbBR8oY3IglraiCCWVlaipa1iLVYW7oKVIuL6YC0s7f0T8jQmhAghD/L0+wZnPJPE3TvJXpi9Z07u+c059373zqyuHVCbTqd6qVR6diA4wMxisbhVKBSm+qrEarUaGQ6Hb8C5TtZKQJSYnEwmH8G5QBjb0sByuXxkPB7vgnHSIv39Y8gbVRtlnkBm3zHeBQsEAt4zRGbnAfuEhUjKBEKhkJZOp70BMWfXAHqLKyJhkUhES6VSlku5ZGR2B6APs7BYLObASFQCQmMPUOYWYKbMLB6Pa4lEQrr2LhkAHbCniHgko3Rdt0DRaFS6Ldv1RPkrs8GcvYTvrvQTxvkKh8PS7dgLdQhQGCVS/TeckTAMw7BWMhgMSrfLngNiP3JSqP6LcqTP59MymYzm9/ule872SQ/Vj/tvuM5Iv2maWjab3RfGGCdDqH9jNBrtYu7yEkb1MzOWq9IsIObsHEBU/7oMctSPhVBtOubsGFbuB2AuDUj1q8I4zgTsySyM6p8VrCrUBOyyHEz181q2caZdsw39Lcuy4gj7KgntdltrNpvS5ck2sJIPEfFTRnU6Ha1er2uYDulWsg0I9he0dhWLU5YR/X7fgnqdAkdglUolB2Gz/A0J5lajsLn1VJoD5GBsvXVk9BmlnpXB3Ho83vfbx4xxAemo1WqHBoPBO0A3eW83bj1myq24V5sDcjBgfmzHbfS3ZDChPAu5Jf/XXBq0B2GBhrlc7jb657aPPReo0Who3W5Xul32QiBHADbN5/P30T+WEcja0in1uqgtLHl2IA6QewC/AMyVwKJtqgTkAzCnN1Hya5iu858vqmTy3ztfGUgoZHUF3zPvYcZ4bzd51HkCEoCT/TQ+377AzNhA9s5hLJ2qNso/jvK5q47KmKU+lmwA5HO41+vxHXTK9rH3XLIMbrVaa5DPDqCXbL9LBrZTtcdr4jfktIlrRzVGaRwy5Ef7K+h19Y92+4mAWv9W/AHAizQaNQfgsAAAAABJRU5ErkJggg=='};});
</script>二、input-select(自定义输入框和下拉框，可预览)
使用场景：有个select标签，选择其中的一项，向后台发送请求，然后根据后台返回的数据，渲染input或select标签，如果是select，还可以继续选择。。。
<!DOCTYPE html>
<html lang="en" ng-app="myModel"><head><meta charset="UTF-8"><title>input和select</title><script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.6.2/angular.js"></script>
</head><body><div ng-controller="thisCtrl"><div><p>=====可预览=====</p><p>1、向后台发送请求，获取返回数据，填充$scope.formDatas</p><p>2、向后台发送请求，获取返回数据，填充$scope.formDatas</p></div><input-select ng-if="formDatas.length>0" form-datas="formDatas"></input-select></div>
</body></html>
<script>var app = angular.module('myModel', []);app.controller('thisCtrl', function ($scope/*,cyRequest*/) {//此处，向后台发送请求，获取返回数据，填充$scope.formDatas$scope.formDatas = [{ type: 'input',inputLabel: '输入框',inputValue: '',},{type: 'select',selectLabel: '选择框标签',selectValue: '后台1',selectOptions: [{ back: '后台0', front: '前端0' },{ back: '后台1', front: '前端1' },{ back: '后台2', front: '前端2' },{ back: '后台3', front: '前端3' },{ back: '后台4', front: '前端4' },{ back: '后台5', front: '前端5' },],selectChainThis: [],//默认值。selectChainNext: null,children: [],//子级。},{type: 'select',selectLabel: '选择框标签2222',selectValue: '后台1',selectOptions: [{ back: '后台0', front: '前端0' },{ back: '后台1', front: '前端1' },{ back: '后台2', front: '前端2' },{ back: '后台3', front: '前端3' },{ back: '后台4', front: '前端4' },{ back: '后台5', front: '前端5' },],selectChainThis: [],//默认值。selectChainNext: null,children: [],//子级。}];});app.directive('inputSelect', function () {var html = `<div style="margin-left:10px;"><div ng-repeat="formData in formDatas track by $index"><div ng-if="formData.type==='input'" style="margin:10px 0"><label ng-bind="formData.inputLabel+'：'" style="width:200px;text-align:right;display:inline-block"></label> <input ng-model="formData.inputValue" type="text" style="width:300px;border:1px solid gray;height:26px;border-radius:4px;"/> </div><div ng-if="formData.type==='select'" style="margin:10px 0"><label ng-bind="formData.selectLabel+'：'" style="width:200px;text-align:right;display:inline-block"></label><select ng-model="formData.selectValue" ng-options="option.back as option.front for option in formData.selectOptions" ng-change="clickOption(formData)"style="width:306px;border:1px solid gray;height:26px;border-radius:4px;"></select><input-select ng-if="formData.children.length>0" form-datas="formData.children"></input-select> </div></div></div>`;return {restrict: 'E',template: html,scope: {formDatas: '=formDatas'},replace: true,controller: function ($scope) {//此处注入“公共请求服务”$scope.clickOption = function (formData) {var objOuter={};objOuter[formData.selectLabel] = formData.selectValue;formData.selectChainNext = angular.copy(formData.selectChainThis);formData.selectChainNext.push(objOuter);//此处，把formData.selectChainNext作为“公共请求服务”的参数，向后台发送请求，获取返回数据result并加工，然后填充formData.childrenvar result=[{type:'input',label:'输入框'},{type:'select',label:'选择框标签'},{type:'select',label:'选择框标签2'}];angular.forEach(result,function(value,index){var objInner = { };if(value.type==='input'){objInner.type = value.type;objInner.inputLabel = value.label;objInner.inputValue = '';}else if(value.type==='select'){objInner.type = value.type;objInner.selectLabel = value.label;objInner.selectValue = '后台1';objInner.selectOptions = [{ back: '后台0', front: '前端0' },{ back: '后台1', front: '前端1' },{ back: '后台2', front: '前端2' },{ back: '后台3', front: '前端3' },{ back: '后台4', front: '前端4' },{ back: '后台5', front: '前端5' },];objInner.selectChainThis = angular.copy(formData.selectChainNext);objInner.selectChainNext = null;objInner.children = [];if(index===1){console.log(objInner.selectChainThis)}}formData.children.push(objInner)})};},link: function (scope, ele, attrs) {}};})
</script>三、only-select（两种）
<!DOCTYPE html>
<html lang="en" ng-app="myModel">
<head><meta charset="UTF-8"><title>onlySelect</title><script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.6.2/angular.js"></script>
</head>
<body><div ng-controller="thisCtrl"><div>一、此消彼长式</div><div>使用场景：</div><div>有上下两行数据，上行有很多备选项</div><div>每点击上行的某项，则该项“会”消失并在下行出现</div><div>每点击下行的某项，则该项“会”消失并在上行出现</div><div style="margin-bottom:20px;"><span ng-click="getDataUp()" style="border-radius:5px;padding:2px;background:gray;">点击获取选中数据</span><span ng-bind="selectedDatasUp"></span></div><div style="width:1000px;"><only-select-up form-datas-up="formDatasUp" current-datas-up="currentDatasUp" two-label-up="twoLabelUp"></only-select-up></div> <div style="width:1000px;border:1px solid gray;margin:100px 0"></div><div>二、固定+动态增减</div><div>使用场景：</div><div>有上下两行数据，上行有很多备选项</div><div>每点击上行的某项，则该项“不”消失并在下行出现，重复点击无效</div><div>每点击下行的某项，则该项“会”消失，但对上行无影响</div><div style="margin-bottom:20px;"><span ng-click="getDataDown()" style="border-radius:5px;padding:2px;background:gray;">点击获取选中数据</span><span ng-bind="selectedDatasDown"></span></div><div style="width:1000px;"><only-select-down form-datas-down="formDatasDown" current-datas-down="currentDatasDown" two-label-down="twoLabelDown"></only-select-down></div> </div>
</body>
</html>
<script>var app = angular.module('myModel', []);app.controller('thisCtrl', function ($scope) {$scope.formDatasUp = [{value: '0',label: '选项一'},{value: '1',label: '选项二'},{value: '2',label: '选项三'},{value: '3',label: '选项四'},{value: '4',label: '选项五'}];$scope.currentDatasUp = [];$scope.twoLabelUp = ['上面标签：','下面标签：'];$scope.getDataUp = function(){$scope.selectedDatasUp=angular.copy($scope.currentDatasUp);};$scope.formDatasDown = [{value: '0',label: '选项一'},{value: '1',label: '选项二'},{value: '2',label: '选项三'},{value: '3',label: '选项四'},{value: '4',label: '选项五'}];$scope.currentDatasDown = [];$scope.twoLabelDown = ['备选项：','被选项：'];$scope.getDataDown = function(){$scope.selectedDatasDown=angular.copy($scope.currentDatasDown);};});app.directive('onlySelectUp', function () {var html = `<div><div style="width:100%;height:30px;line-height:30px;border:1px solid green;padding:5px;"><span ng-bind="twoLabelUp[0]"></span><span ng-repeat="upData in upDatas track by $index" ng-bind="upData.label" ng-click="clickUpUp(upData.value)" style="border-radius:5px;display:inline-block;margin-right:10px;padding:2px;background:gray"></span></div><div style="width:100%;height:30px;line-height:30px;border:1px solid red;padding:5px;"><span ng-bind="twoLabelUp[1]"></span><span ng-repeat="downData in downDatas track by $index" ng-bind="downData.label" ng-click="clickUPDown(downData.value)" style="border-radius:5px;display:inline-block;margin-right:10px;padding:2px;background:gray"></span></div></div>`;return {restrict: 'E',template: html,scope: {formDatasUp: '=formDatasUp',currentDatasUp: '=currentDatasUp',twoLabelUp: '=twoLabelUp',},replace: true,controller: function ($scope) {$scope.upDatas = angular.copy($scope.formDatasUp);$scope.downDatas = [];$scope.clickUpUp = function (valueOuter) {angular.forEach($scope.upDatas,function(value,index){if(valueOuter===value.value){$scope.upDatas.splice(index,1);$scope.downDatas.push(value);$scope.currentDatasUp.push(value.value);console.log($scope.currentDatasUp)}})};$scope.clickUPDown = function (valueOuter) {angular.forEach($scope.downDatas,function(value,index){if(valueOuter===value.value){$scope.upDatas.push(value);$scope.downDatas.splice(index,1);var thisIndex=$scope.currentDatasUp.indexOf(value.value)if(thisIndex>-1){$scope.currentDatasUp.splice(thisIndex,1);}console.log($scope.currentDatasUp)}})};},link: function (scope, ele, attrs) {}};});app.directive('onlySelectDown', function () {var html = `<div><div style="width:100%;height:30px;line-height:30px;border:1px solid green;padding:5px;"><span ng-bind="twoLabelDown[0]"></span><span ng-repeat="upData in upDatasDown track by $index" ng-bind="upData.label" ng-click="clickDownUp(upData)" style="border-radius:5px;display:inline-block;margin-right:10px;padding:2px;background:gray"></span></div><div style="width:100%;height:30px;line-height:30px;border:1px solid red;padding:5px;"><span ng-bind="twoLabelDown[1]"></span><span ng-repeat="downData in downDatasDown track by $index" ng-bind="downData.label" ng-click="clickDownDown(downData,$index)" style="border-radius:5px;display:inline-block;margin-right:10px;padding:2px;background:gray"></span></div></div>`;return {restrict: 'E',template: html,scope: {formDatasDown: '=formDatasDown',currentDatasDown: '=currentDatasDown',twoLabelDown: '=twoLabelDown',},replace: true,controller: function ($scope) {$scope.upDatasDown = angular.copy($scope.formDatasDown);$scope.downDatasDown = [];$scope.clickDownUp = function (data) {var thisIndex=$scope.currentDatasDown.indexOf(data.value)if(thisIndex>-1){return}else{$scope.downDatasDown.push(data);$scope.currentDatasDown.push(data.value);}};$scope.clickDownDown = function (data,index) {$scope.downDatasDown.splice(index,1);var thisIndex=$scope.currentDatasDown.indexOf(data.value)if(thisIndex>-1){$scope.currentDatasDown.splice(thisIndex,1);}};},link: function (scope, ele, attrs) {}};})
</script>
四、on-off组件（真实逻辑，点击后，转圈、向后台发送请求、返回数据、给开关赋值、开关展示状态。点击后，立即改成相反状态，是不对的。）
<html lang="en" ng-app="myModel">
<head><meta charset="UTF-8"><title></title><script type="text/javascript" src="https:cdn.bootcss.com/angular.js/1.6.2/angular.js"></script><style>table{border-collapse: collapse;width:1000px;}table td,table th {padding: 5px;border: 1px solid #cbcbcb;}table thead {background-color: #e0e0e0;color: #000;text-align: left;}</style>
</head>
<body><div ng-controller="thisCtrl"><on-off this-switch="parentSwitch"><span>{{parentSwitch.state?"总开关已开启":"总开关已关闭"}}。总开关关闭时，不能操作分开关！</span></on-off><table><thead><tr><th>序号</th><th>数据1</th><th>数据2</th><th>数据3</th><th>开关1</th><th>开关2</th></tr></thead><tbody><tr ng-repeat="item in tableDatas track by $index"><td ng-bind="$index+1"></td><td ng-bind="item.value1"></td><td ng-bind="item.value2"></td><td ng-bind="item.value3"></td><td><on-off parent-switch="parentSwitch" this-switch="item.value4"></on-off></td><td><on-off parent-switch="parentSwitch" this-switch="item.value5"></on-off></td></tr></tbody></table></div>
</body>
</html>
<script>
var app = angular.module('myModel', []);
app.controller('thisCtrl', function ($scope) {//以下通过向后台请求，获取总开关的数据fromServerParent，经加工后为$scope.parentSwitchvar fromServerParent={isOn:true};$scope.parentSwitch={state:fromServerParent.isOn,callback:function(){this.state=!this.state; }};//以下通过向后台请求，获取分开关的数据fromServerData，经加工后为$scope.tableDatasvar fromServerData=[{value1:"数据1",value2:"数据2",value3:"数据3",isOn:true,isSwitch:true},{value1:"数据1",value2:"数据2",value3:"数据3",isOn:true,isSwitch:true},{value1:"数据1",value2:"数据2",value3:"数据3",isOn:true,isSwitch:true},{value1:"数据1",value2:"数据2",value3:"数据3",isOn:true,isSwitch:true},{value1:"数据1",value2:"数据2",value3:"数据3",isOn:true,isSwitch:true},{value1:"数据1",value2:"数据2",value3:"数据3",isOn:true,isSwitch:true},{value1:"数据1",value2:"数据2",value3:"数据3",isOn:true,isSwitch:true}];var tableDatas=[];angular.forEach(fromServerData,function(value,key){var item={};item.value1=value.value1;item.value2=value.value2;item.value3=value.value3;item.value4={state:value.isOn,callback:function(){this.state=!this.state; }};item.value5={state:value.isSwitch,callback:function(){this.state=!this.state; }};tableDatas.push(item)})$scope.tableDatas=tableDatas;
});
app.directive('onOff', function () {var html = `<div style="display:flex;align-content:center;padding-bottom:10px;"><img ng-src="{{thisSwitch.state?onOff.yes:onOff.no}}" width="65px" height="30px" ng-click="clickSwitch()"/><span ng-transclude style="height:30px;line-height:30px;padding-left:10px;"></span></div>`;return {restrict: 'E',template: html,scope: {thisSwitch: '=thisSwitch',parentSwitch: '=parentSwitch',},transclude:true,replace: false,controller: function ($scope,onOff) {$scope.onOff = onOff;$scope.clickSwitch = function(){//以下总开关关闭时，不能操作分开关！if($scope.parentSwitch && !$scope.parentSwitch.state){return}$scope.thisSwitch.callback()};},link: function (scope, ele, attr) {}};
});
app.factory('onOff', function () {return {yes: 'data:image/png;base64,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',no: 'data:image/png;base64,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',};
})
</script>五、angular1里用layui中的datetime示例
来源：https://www.layui.com/doc/modules/laydate.html#type
<dir-datepicker date-model="pagin_init.filter_option.beginTime"></dir-datepicker>
(function () {angular.module('common-dir').directive('dirDatepicker', function () {return {restrict: 'E',template: '<input type="text" class="form-control common-select-time" ng-model="dateModel" id="{{dateInputId}}" style="width:214px" ng-disabled="isDisable" />',replace: true,scope: {format: '@',dateModel: '=',isDisable: '=',callback: '&'},controller: function ($scope) {$scope.dateInputId = 'id' + Math.random();angular.element(document).ready(function () {var config = {elem: '#' + $scope.dateInputId,theme: '#007bff',trigger: 'click',done: function (value) {$scope.dateModel = value;angular.isFunction($scope.callback) ? $scope.callback() : '';}};if ($scope.format) {config.format = $scope.format;//自定义格式} else {config.type = 'datetime';//控件选择类型}laydate.render(config);});},link: function () {}};});
})();
控件选择完毕后的回调
点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
laydate.render({elem: '#test',done: function(value, date, endDate){console.log(value); //得到日期生成的值，如：2017-08-18console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。}
});六、agular1实现京东购物车
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css"><script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" style="margin:20px;" ng-cloak ><div><label>全选</label><input type="checkbox" ng-model="allCheck" ng-click="allChecked()"><span>总金额：{{ totalMoney() | currency:"￥"}}</span></div><table class="table table-bordered" ng-repeat="oneShop in allShops track by $index" ng-init="outerIndex = $index" style="margin:30px auto"><thead><tr><th><input type="checkbox" ng-model="oneShop.checked" ng-click="shopChecked(oneShop,allShops)"></th><th colspan="7">{{oneShop.shopName}}</th></tr></thead><tbody><tr ng-repeat="oneGoods in oneShop.shopGoods track by $index" ng-init="innerIndex = $index"><td><input type="checkbox" ng-model="oneGoods.checked" ng-click="singleGoods(oneGoods,oneShop.shopGoods,oneShop,allShops)"></td><td>{{oneGoods.goodsName}}</td><td>{{oneGoods.price}}元/件，共</td><td><span ng-click="add(oneGoods,oneShop.shopGoods,oneShop,allShops)" style="display: inline-block;width:25px;text-align: center; border:1px solid gray;user-select: none;cursor: pointer;">+</span></td><td>{{oneGoods.number=oneGoods.number||1}}</td><td><span ng-click="reduce(oneGoods,oneShop.shopGoods,oneShop,allShops)" style="display: inline-block;width:25px;text-align: center; border:1px solid gray;user-select: none;cursor: pointer;">-</span></td><td>件,本商品共: {{oneGoods.singleMoney}}元</td><td ng-click="delete(innerIndex,outerIndex,oneShop,allShops)" style="user-select: none;cursor: pointer;">删除</td></tr></tbody>
</table>
</body>
</html>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function ($scope) {$scope.allShops = [{shopName: "专卖店一：北京鸡",shopGoods: [{goodsName: "北京鸡1",picture: "images/allShops_01.jpg",price: 150.0,singleMoney: 150.0,},{goodsName: "北京鸡2",picture: "images/allShops_02.jpg",price: 119.0,singleMoney: 119.0,},{goodsName: "北京鸡3",picture: "images/allShops_03.jpg",price: 101.0,singleMoney: 101.0,},],},{shopName: "专卖店二：北京鸭",shopGoods: [{goodsName: "北京鸭1",picture: "images/allShops_04.jpg",price: 89.0,singleMoney: 89.0,},{goodsName: "北京鸭2",picture: "images/allShops_05.jpg",price: 99.0,singleMoney: 99.0,},],},{shopName: "专卖店三：北京鹅",shopGoods: [{goodsName: "北京鹅1",picture: "images/allShops_06.jpg",price: 289.0,singleMoney: 289.0,},],},];//点击加减按钮，数量加减;点击删除按钮，删除商品$scope.reduce = function (goods, allGoodsOfOneShop, oneShop, allShops) {goods.number--;if (goods.number <= 1) goods.number = 1;goods.singleMoney = goods.price * goods.number;goods.checked = true;$scope.singleGoods(goods, allGoodsOfOneShop, oneShop, allShops);};$scope.add = function (goods, allGoodsOfOneShop, oneShop, allShops) {goods.number++;goods.singleMoney = goods.price * goods.number;goods.checked = true;$scope.singleGoods(goods, allGoodsOfOneShop, oneShop, allShops);};//删除该件商品$scope.delete = function (innerIndex, outerIndex, oneShop, allShops) {console.log(innerIndex);console.log(outerIndex);console.log(oneShop);console.log(allShops);oneShop.shopGoods.splice(innerIndex, 1);if (oneShop.shopGoods.length <= 0) {allShops.splice(outerIndex, 1);}};/*所有商品总金额计算*/$scope.totalMoney = function () {var total = 0;angular.forEach($scope.allShops, function (outerItem) {angular.forEach(outerItem.shopGoods, function (innerItem) {if (innerItem.checked) {total += innerItem.price * innerItem.number;}});});return total;};/*单件商品选择*/$scope.singleGoods = function (oneGoods,allGoodsOfOneShop,oneShop,allShops) {var flag = true;if (oneGoods.checked) {angular.forEach(allGoodsOfOneShop, function (innerItem) {if (innerItem.checked == false ||typeof innerItem.checked == "undefined") {flag = false;}});} else {$scope.allCheck = false;oneShop.checked = false;flag = false;}if (flag) {oneShop.checked = true;angular.forEach(allShops, function (outerItem) {if (outerItem.checked == false ||typeof outerItem.checked == "undefined") {flag = false;}});}if (flag) {$scope.allCheck = true;}};/*单家商铺选择*/$scope.shopChecked = function (oneShop, allShops) {if (oneShop.checked) {var flag = true;angular.forEach(oneShop.shopGoods, function (innerItem) {innerItem.checked = true;});angular.forEach(allShops, function (outerItem) {console.log(outerItem.checked);if (outerItem.checked == false ||typeof outerItem.checked == "undefined") {flag = false;}});if (flag) {$scope.allCheck = true;}} else {$scope.allCheck = false;angular.forEach(oneShop.shopGoods, function (innerItem) {innerItem.checked = false;});}};/*全部商铺商品选择*/$scope.allChecked = function () {if ($scope.allCheck) {angular.forEach($scope.allShops, function (oneShop) {oneShop.checked = true;angular.forEach(oneShop.shopGoods, function (innerItem) {innerItem.checked = true;});});} else {angular.forEach($scope.allShops, function (oneShop) {oneShop.checked = false;angular.forEach(oneShop.shopGoods, function (innerItem) {innerItem.checked = false;});});}};
});
</script>七、angular1两种作用域绑定
angular1模块、控制器和作用域的两种绑定方式，模块不必通过ng-app关联到HTML的标签上，也不必通过angular.bootstrap()关联到HTML的标签上!
1、正常绑定
<!DOCTYPE html>
<html ng-app="app">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body><div><div ng-controller="myCtrl">{{ hello }}</div></div><script type="text/javascript">var module = angular.module("app", []);module.controller("myCtrl", function ($scope) {//app模块的控制器（myCtrl）将作用域的hello 赋值为 "a Angular app"$scope.hello = "a Angular app";});</script>
</body>
</html>
2、异常绑定
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body><div id="app1"><div ng-controller="myCtrl">{{ hello }}</div></div><div id="app2"><div ng-controller="myCtrl">{{ hello }}</div></div><script type="text/javascript">var module1 = angular.module("test1", []);module1.controller("myCtrl", function ($scope) {//test1模块的控制器（myCtrl）将作用域的hello 赋值为 "a Angular app"$scope.hello = "a Angular app";});var module2 = angular.module("test2", []);module2.controller("myCtrl", function ($scope) {//test2模块的控制器（myCtrl）将作用域的hello 赋值为 "a Angular app"$scope.hello = " another Angular app";});/*此方法用于手动加载angularjs模板*/angular.bootstrap(document.getElementById("app1"), ['test1']);/*此方法用于手动加载angularjs模板*/angular.bootstrap(document.getElementById("app2"), ['test2']);</script>
</body>
</html>八、两种函数传递
1、以(对象)变量传递
<!doctype html>
<html lang="en" ng-app="appModule">
<head><meta charset="UTF-8"><title>函数当作变量传进去</title>
</head>
<body ng-controller="myCtrl"><p ng-click="fnClick('我是原有标签')">点击原有标签</p><my-text fn="fnClick"></my-text><br/><script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script><script>var app = angular.module('appModule', []);app.controller('myCtrl', function ($scope) {$scope.fnClick = function (tip) {alert(tip)}});app.directive('myText', function () {return {restrict: 'E',template: '<h1 ng-click="thisFn()"><span>点击自定义标签</span></h1>',scope: {fn: '='},controller: function ($scope) {$scope.thisFn=function(){$scope.fn('我是自定义标签，函数当作变量传入')}}}})</script>
</body>
</html>
2、以函数传递
<!doctype html>
<html lang="en" ng-app="appModule">
<head><meta charset="UTF-8"><title>函数当作函数传进去</title>
</head>
<body ng-controller="myCtrl"><p ng-click="fnClick('我是原有标签','AAA')">点击原有标签</p><my-text fn="fnClick(tipA,tipB)"></my-text><br /><script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script><script>var app = angular.module('appModule', []);app.controller('myCtrl', function ($scope) {$scope.fnClick = function (tip,pit) {console.log(pit)alert(tip)}});app.directive('myText', function () {return {restrict: 'E',template: '<h1 ng-click="thisFn()"><span>点击自定义标签</span></h1>',scope: {fn: '&'},controller: function ($scope) {$scope.thisFn=function(){$scope.fn({tipA:'我是自定义标签，函数当作函数传入',tipB:'BBB'})}}}})</script>
</body>
</html>
查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
相关文章
- （Web前端）后台管理系统框架收集
一、（Web前端）常用的后台管理系统框架 1、使用vue-element-admin https://panjiachen.github.io/vue-element-admin-site/zh/guide/ 模板建议使用 vueAdmin-template ， 桌面端 electron-vue-admin 1.包含功能 登录/注销 权限验证 侧边栏…...
2024/4/21 14:08:23 - 如何在Angular2-cli中使用插件(不使用配置)
重要点: 要把插件放在src/assets文件中 如何在angular-cli中使用jquery插件 a.在index.html中引入 <script src"./assets/jquery-1.8.3.min.js"></script> b. 在要使用jquery的组件中声明（XX.component.ts） declare var $ : any;…...
2024/4/21 14:08:19 - 全切双眼皮是怎么回事
...
2024/4/21 14:08:18 - 全切双眼皮上眼皮耷拉
...
2024/4/21 14:08:17 - 2016-2017前端试题
HTML&CSS：对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、HTML5、CSS3、FlexboxJavaScript：数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、B…...
2024/4/21 14:08:16 - 微前端架构实战中-single-spa篇
single-spa：https://zh-hans.single-spa.js.org/ 是一个实现微前端架构的框架。在 single-spa 框架中有三种类型的微前端应用：single-spa-application / parcel：微前端架构中的微应用，可以使用 vue、react、angular 等框架。singl…...
2024/4/21 14:08:15 - HTML-CSS-JS编码规范
最近整理了一份HTML/CSS/JS编码规范，供大家参考。 目录： 一、HTML编码规范 二、CSS编码规范 三、JS编码规范 一、HTML编码规范 1. img标签要写alt属性 根据W3C标准，img标签要写alt属性，如果没有就写一个空的。但是一般要写一个…...
2024/4/21 14:08:14 - Vue-基础
Vue 渐进式 JavaScript 框架 通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目一、走进Vue 1、what – 什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架2、why – 为什么要学习Vu…...
2024/4/21 14:08:13 - Vue -- 基础语法和使用
Vue 渐进式 JavaScript 框架 通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目 一、走进Vue 1、what -- 什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架 2、why -- 为什么要学习Vue …...
2024/4/20 9:45:03 - 全切双眼皮切口设计
...
2024/4/20 15:36:12 - 全切双眼皮内眼角太宽
...
2024/4/20 15:36:10 - Angular、React、Vue框架使用差异总结（一）
Angular、React、Vue是目前比较流行的前端框架，能够系统化的管理好前端代码，实现组件的可重用性。一定程度上提高了开发速度与质量。在一些基础概念上这三个框架存在一些差异，使用上也有着一定的区别。 一.安装 1.Angular：通过c…...
2024/4/20 15:36:09 - 全切双眼皮眉眼距离近
...
2024/4/21 14:08:13 - 全切全切双眼皮两个月好深
...
2024/4/21 14:08:11 - 全切双眼皮开眼角案例
...
2024/4/21 14:08:10 - angular 使用服务共享数据需要注意
在使用服务共享数据时，需要注意一些细节，否则会出现视图不刷新，也不报错这样的问题，遇到了，总结下 如下： <div ng-controllerctr1><a href"#" ng-clickname()>1{{name1.name}}</a…...
2024/4/21 14:08:09 - 全切双眼皮恢复一年
...
2024/4/21 14:08:09 - 全切双眼皮恢复太慢
...
2024/4/21 14:08:07 - 嵌入式相关的开源网站和必备软件
由于以下的开源网站都是英文的，为了你们下载方便我给出的网址都是绝对路径，点进网站你就可以下载相应的源码，希望给你带来帮助。U-boot源码下载地址：ftp://ftp.denx.de/pub/u-boot/kernel :https://www.kernel.org/pub/linux/根文件系统制作所需要的工具busybox:http://www…...
2024/4/21 14:08:06 - 全切双眼皮恢复两年
...
2024/4/21 14:08:05
最新文章
- 2024/5/4 英语每日一段
But something is slowing that rocket down: lack of access to the types of data used to train robots so they can interact more smoothly with the physical world.It’s far harder to come by than the data used to train the most advanced AI models like GPT—mos…...
2024/5/5 2:17:41 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言，在此感激不尽。 权重和梯度的更新公式如下： w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - ChatGPT 赚钱初学者指南（上）
原文：The Beginner’s Guide to Earning Money Online with ChatGPT 译者：飞龙 协议：CC BY-NC-SA 4.0 第一章：理解基础知识 什么是 ChatGPT？ 在人工智能与人类对话相遇的数字织锦中，ChatGPT 作为一个突出…...
2024/5/3 4:17:57 - node.js常用指令
1、node：启动 Node.js REPL（交互式解释器）。 node 2、node [文件名]：执行指定的 JavaScript 文件。 node app.js 3、npm init：初始化一个新的 Node.js 项目，生成 package.json 文件。 此命令会创建一个…...
2024/5/3 8:55:58 - 【外汇早评】美通胀数据走低，美元调整
原标题：【外汇早评】美通胀数据走低，美元调整昨日美国方面公布了新一期的核心PCE物价指数数据，同比增长1.6%，低于前值和预期值的1.7%，距离美联储的通胀目标2%继续走低，通胀压力较低，且此前美国一季度GDP初值中的消费部分下滑明显，因此市场对美联储后续更可能降息的政策…...
2024/5/4 23:54:56 - 【原油贵金属周评】原油多头拥挤，价格调整
原标题：【原油贵金属周评】原油多头拥挤，价格调整本周国际劳动节，我们喜迎四天假期，但是整个金融市场确实流动性充沛，大事频发，各个商品波动剧烈。美国方面，在本周四凌晨公布5月份的利率决议和新闻发布会，维持联邦基金利率在2.25%-2.50%不变，符合市场预期。同时美联储…...
2024/5/4 23:54:56 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题：【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五，美国方面公布了新一期的非农就业数据，大幅好于前值和预期，新增就业重新回到20万以上。具体数据： 美国4月非农就业人口变动 26.3万人，预期 19万人，前值 19.6万人。 美国4月失业率 3.6%，预期 3.8%，前值 3…...
2024/5/4 23:54:56 - 【原油贵金属早评】库存继续增加，油价收跌
原标题：【原油贵金属早评】库存继续增加，油价收跌周三清晨公布美国当周API原油库存数据，上周原油库存增加281万桶至4.692亿桶，增幅超过预期的74.4万桶。且有消息人士称，沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油，印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/4 23:55:17 - 【外汇早评】日本央行会议纪要不改日元强势
原标题：【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升，避险资金回流日元有关，也与前一段时间的美日贸易谈判给日本缓冲期，日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策，但这符…...
2024/5/4 23:54:56 - 【原油贵金属早评】欧佩克稳定市场，填补伊朗问题的影响
原标题：【原油贵金属早评】欧佩克稳定市场，填补伊朗问题的影响近日伊朗局势升温，导致市场担忧影响原油供给，油价试图反弹。此时OPEC表态稳定市场。据消息人士透露，沙特6月石油出口料将低于700万桶/日，沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”，沙特将满…...
2024/5/4 23:55:05 - 【外汇早评】美欲与伊朗重谈协议
原标题：【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议，昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告，伊朗外长昨日回应称，欧洲国家履行它们的义务，伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/5/4 23:54:56 - 【原油贵金属早评】波动率飙升，市场情绪动荡
原标题：【原油贵金属早评】波动率飙升，市场情绪动荡因中美贸易谈判不安情绪影响，金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际，美国按照既定计划向中国2000亿商品征收25%的关税，市场情绪有所平复，已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/5/4 23:55:16 - 【原油贵金属周评】伊朗局势升温，黄金多头跃跃欲试
原标题：【原油贵金属周评】伊朗局势升温，黄金多头跃跃欲试美国和伊朗的局势继续升温，市场风险情绪上升，避险黄金有向上突破阻力的迹象。原油方面稍显平稳，近期美国和OPEC加大供给及市场需求回落的影响，伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级，美国对中…...
2024/5/4 23:54:56 - 【原油贵金属早评】市场情绪继续恶化，黄金上破
原标题：【原油贵金属早评】市场情绪继续恶化，黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动，人民币汇率出现大幅的贬值动能，金融市场受到非常明显的冲击。尤其是波动率起来之后，对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势，这…...
2024/5/4 18:20:48 - 【外汇早评】美伊僵持，风险情绪继续升温
原标题：【外汇早评】美伊僵持，风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件，导致波斯湾局势进一步恶化，市场担忧美伊可能会出现摩擦生火，避险品种获得支撑，黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日，四艘商船在阿联酋领海附近的阿曼湾、…...
2024/5/4 23:54:56 - 【原油贵金属早评】贸易冲突导致需求低迷，油价弱势
原标题：【原油贵金属早评】贸易冲突导致需求低迷，油价弱势近日虽然伊朗局势升温，中东地区几起油船被袭击事件影响，但油价并未走高，而是出于调整结构中。由于市场预期局势失控的可能性较低，而中美贸易问题导致的全球经济衰退风险更大，需求会持续低迷，因此油价调整压力较…...
2024/5/4 23:55:17 - 氧生福地 玩美北湖（上）——为时光守候两千年
原标题：氧生福地 玩美北湖（上）——为时光守候两千年一次说走就走的旅行，只有一张高铁票的距离～ 所以，湖南郴州，我来了～ 从广州南站出发，一个半小时就到达郴州西站了。在动车上，同时改票的南风兄和我居然被分到了一个车厢，所以一路非常愉快地聊了过来。 挺好，最起…...
2024/5/4 23:55:06 - 氧生福地 玩美北湖（中）——永春梯田里的美与鲜
原标题：氧生福地 玩美北湖（中）——永春梯田里的美与鲜一觉醒来，因为大家太爱“美”照，在柳毅山庄去寻找龙女而错过了早餐时间。近十点，向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”，到郴州必吃的美食之一。 哇塞！那个味美香甜…...
2024/5/4 23:54:56 - 氧生福地 玩美北湖（下）——奔跑吧骚年！
原标题：氧生福地 玩美北湖（下）——奔跑吧骚年！让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/4 23:55:06 - 扒开伪装医用面膜，翻六倍价格宰客，小姐姐注意了！
原标题：扒开伪装医用面膜，翻六倍价格宰客，小姐姐注意了！扒开伪装医用面膜，翻六倍价格宰客！当行业里的某一品项火爆了，就会有很多商家蹭热度，装逼忽悠，最近火爆朋友圈的医用面膜，被沾上了污点，到底怎么回事呢？ “比普通面膜安全、效果好！痘痘、痘印、敏感肌都能用…...
2024/5/4 2:59:34 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题：「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势： 1、铁皮石斛：自唐宋以来，一直被列为皇室贡品，铁皮石斛生于海拔1600米的悬崖峭壁之上，繁殖力差，产量极低，所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/5/4 23:55:16 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题：丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司，专注美业21年，其旗下品牌： 「圣茵美」私密荷尔蒙抗衰，产后修复 「圣仪轩」私密荷尔蒙抗衰，产后修复 「花茵莳」私密荷尔蒙抗衰，产后修复 「丽彦妆」专注医学护…...
2024/5/4 23:54:58 - 广州械字号面膜生产厂家OEM/ODM4项须知！
原标题：广州械字号面膜生产厂家OEM/ODM4项须知！广州械字号面膜生产厂家OEM/ODM流程及注意事项解读： 械字号医用面膜，其实在我国并没有严格的定义，通常我们说的医美面膜指的应该是一种「医用敷料」，也就是说，医用面膜其实算作「医疗器械」的一种，又称「医用冷敷贴」。 …...
2024/5/4 23:55:01 - 械字号医用眼膜缓解用眼过度到底有无作用？
原标题：械字号医用眼膜缓解用眼过度到底有无作用？医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料，含70%以上的水分。体表皮肤温度传导到本产品的凝胶层，热量被凝胶内水分子吸收，通过水分的蒸发带走大量的热量，可迅速地降低体表皮肤局部温度，减轻局部皮肤的灼…...
2024/5/4 23:54:56 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示，配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下：1、长按电脑电源键直至关机，然后再按一次电源健重启电脑，按F8健进入安全模式2、安全模式下进入Windows系统桌面后，按住“winR”打开运行窗口，输入“services.msc”打开服务设置3、在服务界面，选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE，请勿更改元素数目。
%读入6幅图像（每一幅图像的大小是564*564） f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面，在等待界面中我们需要等待操作结束才能关机，虽然这比较麻烦，但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows，请勿关闭计算机”的提示，要过很久才能进入系统，有的用户甚至几个小时也无法进入，下面就教大家这个问题的解决方法。第一种方法：我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题，电脑时发现开机屏幕显现“正在配置Windows Update，请勿关机”(如下图所示)，而且还需求等大约5分钟才干进入系统。这是怎样回事呢？一切都是正常操作的，为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示，没过几秒后电脑自动重启，每次开机都这样无法进入系统，此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一：开机按下F8，在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况，就是电脑提示正在准备windows请勿关闭计算机，碰到这样的问题该怎么解决呢，现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法：1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后，每次关机的时候桌面上都会显示一个“配置Windows Update的界面，提示请勿关闭计算机”，每次停留好几分钟才能正常关机，导致什么情况引起的呢？出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着，别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚，只能是考虑备份数据后重装系统了。解决来方案一：管理员运行cmd：net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办？
原标题：电脑提示“配置Windows Update请勿关闭计算机”怎么办？win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢？一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ，然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ，然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间：2020-04-20 22:24:19 浏览次数：729次 区域： 南阳 > 卧龙 列举网提醒您：为保障您的权益，请不要提前支付任何费用！ 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于：钉钉，外勤365，红圈通，企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”，长时间没反应，无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了，具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面，长时间没反应，无法进入系统。这个问题原来帮其他同学也解决过，网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办？...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法，并在最后教给你1种保护系统安全的好方法，一起来看看！电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中，添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败，正在还原更改，请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候，开启电脑发现电脑显示：配置windows更新失败，正在还原更改，请勿关闭计算机。。.这要怎么办呢？下面小编就带着大家一起看看吧！如果能够正常进入系统，建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机，电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机，电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题，就是我们的win7系统在关机的时候，总是喜欢显示“准备配置windows，请勿关机”这样的一个页面，没有什么大碍，但是如果一直等着的话就要两个小时甚至更久都关不了机，非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时，一般是您正对windows进行升级，但是这个要是长时间没有反应，我们不能再傻等下去了。可能是电脑出了别的问题了，来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败，还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况，当我们打开电脑之后，发现一直停留在一个界面：“配置Windows Update失败，还原更改请勿关闭计算机”，等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57