CODEWITHSUNDEEP
angularjstwitter-bootstrap
maschwenk
maschwenk

Reputation: 599

Batch trigger Angular Bootstrap button click events

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?

Upvotes: 0

Views: 505

Answers (1)

maschwenk
maschwenk

Reputation: 599

Using Matthew Berg's (idk how to link to your profile :S ) solution, I emitted an event from the batch action button controller to the parent controller, caught the event in the parent controller and then broadcast the model changes down to all the bootstrap button controllers. This worked excellently.

Thanks Matt

Upvotes: 1

Related Questions