I have a large Angular page with 100+ rows of data, each with a button in the final column which sets a Bootstrap radiomodel based on which button you click.
//....
<tr>
<td>
data1
</td>
<td>
data2
</td>
<td>
<div ng-controller="pickSource" class="btn-group " role="group" aria-label="...">
<label class="btn btn-info btn-xs pickSourceButton takeXxxBtn"
ng-model="radioModel"
btn-radio="'yyy'" >
Approve
</label>
<label class="btn btn-warning btn-xs pickSourceButton takeYyyBtn"
ng-model="radioModel"
btn-radio="'yyy'" >
Reject
</label>
<label class="btn btn-danger btn-xs pickSourceButton noActionBtn"
ng-model="radioModel"
btn-radio="'noAction'" >
Hold
</label>
</div>
</td>
</tr>
//... many of these, the picksource block is actually a directive but i simpified here
Button is like this: (approve|reject|hold)
Controller for this button is like this:
controller('pickSource', function ($scope, $log) {
$scope.radioModel = "noAction";
$scope.$watch('radioModel', function(newValue, oldValue) {
if (newValue !== oldValue) {
$log.log('emitting event');
//even if i remove this below it is slow
$scope.$emit('pickSourceButtonDidChange',someDATA);
}
});
});
I have a batch operation button which will select the same value (i.e. select source for all the rows) for every row.
Currently I am triggering the events like so:
//inside bootstrap dropdown
if(source == "xxx"){
el = document.getElementsByClassName('takexxxBtn');
}
else if (source == "yyy"){
el = document.getElementsByClassName('takeyyyBtn');
}
else{
el = document.getElementsByClassName('noActionBtn');
}
$timeout(function() {
angular.element(el).triggerHandler('click');
}, 0);
However, I am getting really poor performance from this. I imagine this is because the click events each have quite a expensive series of actions (I even took out all the code that is triggered when the button is clicked and still got the same performance hit), but I am wondering if there is any alternative. I cannot simply change the underlying data that the trigger executes because I need the UI to update as well (I need button to look like it's clicked, etc.)
Is there any way to do this?
