javascript - I am trying to create a button that changes its icon and color when clicked in angularjs -

-

i using font awesome icons , want change button icon , color when clicked have written directive 

directive('uitoggleclass', ['$timeout', '$document', function($timeout, $document) {     return {       restrict: 'ac',       link: function(scope, el, attr) {         el.on('click', function(e) {           e.preventdefault();           var classes = attr.uitoggleclass.split(','),               targets = (attr.target && attr.target.split(',')) || array(el),               key = 0;           angular.foreach(classes, function( _class ) {             var target = targets[(targets.length && key)];                         ( _class.indexof( '*' ) !== -1 ) && magic(_class, target);             $( target ).toggleclass(_class);             key ++;           });           $(el).toggleclass('active');            function magic(_class, target){             var patt = new regexp( '\\s' +                  _class.                   replace( /\*/g, '[a-za-z0-9-_]+' ).                   split( ' ' ).                   join( '\\s|\\s' ) +                  '\\s', 'g' );             var cn = ' ' + $(target)[0].classname + ' ';             while ( patt.test( cn ) ) {               cn = cn.replace( patt, ' ' );             }             $(target)[0].classname = $.trim( cn );           }         });       }     };   }]);

and index.html

<div class="jumbotron" ng-app="plunker">     <p>         <button class="btn btn-default" ui-toggle-class="btn-success">           <i class="fa fa-cloud-upload text"></i>           <span class="text">upload</span>           <i class="fa fa-check text-active"></i>           <span class="text-active">success</span>         </button>     </p>   </div>

but not changing button when clicked can me? here fiddle

your fiddle has bunch of errors (you need set "no wrap - in <head>" angular work.) also, have $ variable undefined - did mean include jquery? don't have to, simple example, , define as:

var $ = angular.element; // jqlite

here's working forked fiddle.

but don't need of this. can use built-in ng-class directive:

<button class="btn btn-default" ng-class="{'btn-success': active}"         ng-click="active = !active">toggle</button>

edit:

if need change contents of button, can re-use active variable toggle displayed content:

<button class="btn btn-default" ng-class="{'btn-success': active}"         ng-click="active = !active">    <i    ng-hide="active" class="fa fa-cloud-upload text"></i>   <span ng-hide="active" class="text">upload</span>    <i    ng-show="active" class="fa fa-check text-active"></i>   <span ng-show="active" class="text-active">success</span>  </button>

fiddle


Comments

Post a Comment

Popular posts from this blog

qt - Using float or double for own QML classes -

-
i've created components , helper methods using c++ , qt used in qml gui. of methods calculate gui elements (size, transformations, scene graph items creation). target arm 32 bit using opengl / eglfs render output. opengl using float , qml using real (defined double ). what should use in c++ do not lose precision? if use qreal ( double ) shouldn't lose precision. if git grep float in qtbase.git , can find out bit more: dist/changes-5.2.0-**************************************************************************** dist/changes-5.2.0-* important behavior changes * dist/changes-5.2.0-**************************************************************************** dist/changes-5.2.0- dist/changes-5.2.0- - qt compiled qreal typedef'ed double on dist/changes-5.2.0: platforms. qreal float on arm chipsets before. guarantees more dist/changes-5.2.0- consistent behavior between platforms qt supports, binary dist/chan...
Read more

Create Outlook appointment via C# .Net -

-
i need create outlook appointment using microsoft.office.interop.outlook , while can work locally on own workstation , works if run web application via server's browser, not work when connect server externally. hence, think might permission issue. i changed application pool identity " localsystem " don't access denied error. unfortunately, doesn't work. the app behaves if appointment created, appointment doesn't appear in outlook. here include file on top of aspx.cs page using outlook = microsoft.office.interop.outlook; here code using pop appointment. outlook.application apptapp = new outlook.application(); outlook.appointmentitem appt = apptapp.createitem(outlook.olitemtype.olappointmentitem) outlook.appointmentitem; appt.subject = txtfirstname.text + " " + txtlastname.text; appt.body = txtcomment.text; appt.alldayevent = false; appt.start = datetime.parse(txtreminderdate.text + " 8:00 am"); appt.end = datetime.p...
Read more

ios - Swift Array Resetting Itself -

-
i have 2 arrays: pointhistory , datehistory . have nstimer , , when timer runs out, action called. in action appending int pointhistory , , current date string datehistory . here timer action: func timeraction() { let steppervalue = int(stepper.value) employee.numberofpoints = steppervalue networking.saveemployee(employee, completion: { (error) -> void in if error != nil { let alert = uialertcontroller(title: "error", message: "there error updating \(self.employee.name)'s points", preferredstyle: .alert) let alertaction = uialertaction(title: "ok", style: .cancel, handler: nil) alert.addaction(alertaction) self.presentviewcontroller(alert, animated: true, completion: nil) } }) var dateformatter = nsdateformatter() dateformatter.dateformat = "mm-dd-yyyy" dateformatter.timezone = nstimezone.localtimezone() var date = nsdate() var ...
Read more