javascript - ng-click not firing on a button click -


i facing weird error not able call function on ng-click when button clicked.

this block of code ng-click not working delete button working edit button.

  <table ng-table="tableparams" class="table table-striped table-bordered pages_table">                         <thead>                             <td><b>id</b></td>                             <td><b>image</b></td>                             <td><b>alt</b></td>                             <td><b>edit</b></td>                             <td><b>delete</b></td>                         </thead>                         <tbody>                             <tr ng-repeat="dat in newdata">                                 <td>((dat.id))</td>                                     <td class="clients_review_admin_item"><img src="((imagepath+'/'+dat.image))" alt="" style="height:100px;width:150px" /></td>                                 <td>((dat.alt))</td>                                                                                     <td><button type="button" class="btn btn-info rounded-buttons" data-toggle="modal" data-target="#editwhy" ng-click="editwhy(dat)" ><i class="fa fa-pencil"></i></button></td>                                 <td>                             <button class="btn btn-danger rounded-buttons" type="button"   ng-click="deletefooter(dat.id,dat.alt)"><i class="fa fa-close"></i></button>                                 </td>                             </tr>                         </tbody>                     </table>

the javascript function deletefooter 

$scope.deletefooter = function(id,name){ console.log("called");      var posturl = apiurl+"/delfriendfooter";       var $inputs = {          id:id,          token:$scope.token,       };      var func = function(){                  $http.post(posturl, $inputs).                    success(function(data, status, headers, config) {                                  swal("deleted!", name+" has been deleted!", "success");                               var dat = $scope.newdata;                          for(var i=0,len= dat.length;i<len;i++){                              if(dat[i].id==id){                                  dat.splice(i,1);                                  break;                              }                          }                                                                                      }).                    error(function(data, status, headers, config) {                              sweetalert("oops!!", "please try again!!", "error");                    });      }   $scope.deletepopup(func,name);

};

the weird thing is working edit functionality

 <td><button class="btn btn-info rounded-buttons" data-toggle="modal" data-target="#editwhy" ng-click="editwhy(dat)" ><i class="fa fa-pencil"></i></button></td>

i have tried call other functions not firing.

note: have changed angular braces (()).

this happening because of the way angular / buttons / forms work.

specifically:

to prevent double execution of handler, use 1 of ngsubmit or ngclick directives. because of following form submission rules in html specification:

  • if form has 1 input field hitting enter in field triggers form submit (ngsubmit)
  • if form has 2+ input fields , no buttons or input[type=submit] hitting enter doesn't trigger submit
  • if form has 1 or more input fields , 1 or more buttons or input[type=submit] hitting enter in of input fields trigger click handler on first button or input[type=submit] (ngclick) , submit handler on enclosing form (ngsubmit)

because of these rules, buttons can behave little strangely.

a solution add type="button" buttons. prevent these rules being applied:

<button type="button" class="btn btn-danger rounded-buttons"  ng-click="deletefooter(dat.id,dat.alt)"><i class="fa fa-close"></i></button>

angular then, instead of using form standards decide function call, execute ng-click's function.


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

i rendering jbutton image on simulate jcheckbox behavior. why don't let jtable render jcheckbox? because need bigger checkboxes , there's no way can resize them (as far know). so, have own table cell renderer , editor. both renders jbutton , checkbox images on them. trying change image checked image unchecked image (or vice versa) , update cell value (boolean true or false). however, reason, getcelleditorvalue() not update table. so, release mouse, value goes original one. any appreciated! lot! public class tableexample extends jframe { jscrollpane pane; jpanel panel; jtable table; object[][] data; mytablemodel tm; renderer buttoncolumn; public tableexample(object[][] data) throws ioexception { string[] columns = {"column#1", "column#2", "column#3", "column#4", "column#5", "column#6"}; this.data = data; this.setpreferredsize(new dimension(700, 500));
Read more