"Angularjs" uses angular to build PC-side projects, switch buttons

Method one (using directives)

1. Instruction (Angular-ui-switch.js)

angular.module (' Uiswitch ', []) app.directive (' Switch ', function () {return {restrict: ' AE ', Replace:true, Tran      Sclude:true, template:function (element, attrs) {var html = '; HTML + = '<span'; HTML += 'class= "switch" + (Attrs.class?) ' + attrs.class: ') + ' "'; HTML += Attrs.ngmodel? ' Ng-click= "' + attrs.disabled + '?" ' + Attrs.ngmodel + ': ' + Attrs.ngmodel + ' =! ' + Attrs.ngmodel + (Attrs.ngchange? ‘; ' + Attrs.ngchange + ' () "' : '): '; HTML += 'Ng-class= "{checked: ' + Attrs.ngmodel + ', disabled: ' + attrs.disabled + '}"'; HTML += '>'; HTML + = '<Small></Small>'; HTML + = '<inputtype= "checkbox"'; HTML += Attrs.id? ' ID= "' + attrs.id + '"' : '; HTML += Attrs.name? ' Name= "' + attrs.name + '"' : '; HTML += Attrs.ngmodel? ' Ng-model= "' + Attrs.ngmodel + '"' : '; HTML += 'style= "Display:none" />'; HTML + = '<spanclass= "Switch-text">';/*adding new container for switch text*/html + = Attrs.on? '<spanclass= "On">' +attrs.on+ '</span>': ';/*switch text on value set by the user in Directive HTML markup*/HTML + = Attrs.off? '<spanclass= "Off">' +attrs.off + '</span>' : '; /*switch text off value set by the user in Directive HTML markup*/HTML + = '</span>';    return HTML; }  }});

2.css (angular-ui-switch.css)

. switch {background: #fff;  border:1px solid #dfdfdf;  position:relative;  Display:inline-block;  Box-sizing:content-box;  overflow:visible;  width:52px;  height:30px;  padding:0px;  margin:0px;  border-radius:20px;  Cursor:pointer;  Box-shadow:rgb (223, 223, 223) 0px 0px 0px 0px inset;  Transition:0.3s ease-out All;  -webkit-transition:0.3s ease-out All; Top: -1px;} /*adding a wide width for larger switch text*/.switch.wide {width:80px;}.  Switch Small {background: #fff;  border-radius:100%;  box-shadow:0 1px 3px Rgba (0,0,0,0.4);  width:30px;  height:30px;  Position:absolute;  top:0px;  left:0px;  Transition:0.3s ease-out All; -webkit-transition:0.3s ease-out all;}.  switch.checked {background:rgb (100, 189, 99); Border-color:rgb (100, 189, 99);}. switch.checked small {left:22px;} /*wider switch text moves small further to the right*/.switch.wide.checked small {left:52px;} /*styles for Switch-text*/.switch. Switch-text {font-family:arial, Helvetica, sanS-serif; font-size:13px;}.  Switch. off {display:block;  Position:absolute;  right:10%;  top:25%;  z-index:0; Color: #A9A9A9;}.   Switch. on {display:none;  z-index:0;  Color: #fff;  Position:absolute;  top:25%; left:9%;}. Switch.checked. Off {display:none;}. Switch.checked. on {display:block;}.  switch.disabled {opacity:. 50; cursor:not-allowed;}

3. Inject in the Apps.js

var app = Angular.module (' app ', [' Uiswitch '])

4.index.html introduction of related documents

<Linkrel= "stylesheet"href=".. /angular-ui-switch.css "/><Scriptsrc=".. /angular.min.js "></Script><Scriptsrc=".. /angular-ui-switch.js "></Script><Scriptsrc= "App.js"></Script>

5. Application:

<formData-ng-controller= "Mycontroller">    <Switchname= "Enabled"Ng-model= "Enabled"Ng-change= "Changecallback"></Switch>    <P>        <ButtonNg-click= "enabled=!enabled">Toggle</Button>    </P>    <P>Enabled: {{Enabled}}</P>    <!--Examples of using switch text on/off values.  These values can be anything. First example shows basic on/off -    <Switchname= "OnOff"Ng-model= "OnOff" on= "On"off= "Off"></Switch>    <P>        <ButtonNg-click= "Onoff=!onoff">Toggle</Button>    </P>    <P>Enabled: {{onOff}}</P>    <!--Examples of using the nonsense words lorem/ipsum in the on/off values. Because These is wider, added an option ' wide ' class to ' allow for more ' -    <Switchname= "YesNo"Ng-model= "YesNo" on= "Lorem"off= "Ipsum"class= "Wide"></Switch>    <P>        <ButtonNg-click= "Onoff=!onoff">Toggle</Button>    </P>    <P>Enabled: {{yesNo}}</P>    <!--Examples of using switch disabled states. -    <Switchname= "Disabled"Ng-model= "Disabled"Disabled= "true"></Switch>    <P>        <ButtonNg-click= "disabled=!disabled">Toggle</Button>    </P>    <P>Enabled: {{disabled}}</P></form>

6. Appendix---directory Structure

7.:

Method Two (using the background map and Ng-class)

Html

<class= "wrap"  ng-class= "{true: ' on ', false: ' Off '}[ison]"  Ng-click= "IsOn =!ison"></span>

As1

. wrap{    Display:block;    width:68px;    height:40px;    Background-size:cover;    Cursor:pointer;}. on{    Background:url (.. /on.png) no-repeat;    }. off{    Background:url (.. /off.png) No-repeat;}

Js

$scope. isOn = false;//default to OFF state

Effect:

RELATED links:

• Https://github.com/xpepermint/angular-ui-switch

Personal information:

Smile. Angle of rotation

qq:493177502

"Angularjs" uses angular to build PC-side projects, switch buttons