What would be the best way to find an angular element by class?

Question

Hey thanks for checking out my question. I am trying to find angular elements by class and push them into an array for another function.

 $scope.find = function () {
    var someVar = [];
    $scope.element.find('.selectedRow').each(function(){
        someVar.push($(this).find('td').eq(0).text())

    })
    return rows;
    console.log(rows);
};

Working with the DOM in a controller is a huge red flag with angular. What exactly are you trying to accomplish? — dnc253, Jul 25 '14 at 17:36
I have a table where I can click the rows to select them, I am trying to implement a function to find the rows based on the selection and filter only the selected rows. — user3791317, Jul 25 '14 at 17:40

score 1 · Answer 1 · edited May 23 '17 at 12:04

First off, I highly recommend reading this answer about how to "think" in angular: https://stackoverflow.com/a/15012542/1014979

With angular, you need to think in terms of the model, not the DOM. So, you should add some ng-clicks to your rows that will add them to your array (and probably remove them from the array when deselected). Then you have your array in your model already without need to do any selecting from the DOM.

score 0 · Answer 2 · answered Jul 25 '14 at 17:47

0

You can make use of

angular.element(element);

and in your case

angular.element(document.querySelector('.selectedRow'))

where element can be your class selector

answered Jul 25 '14 at 17:47

V31

7,626
3
26
44

score 0 · Answer 3 · answered Jul 25 '14 at 18:17

0

I would recommend using(creating) a directive for that.

answered Jul 25 '14 at 18:17

Fortuna

611
6
18

score 0 · Answer 4 · answered Jul 25 '14 at 19:05

As mentioned by dnc253, referencing the DOM from your controller is not an effective way to develop in Angular. Another way you might do this:

Inject the data in the table into your view from the controller:

.controller('controllerName', ['$scope', function($scope) {
    $scope.rows = [
        { col1: 'foo', col2: 'bar', selected: false },
        { col1: 'baz', col2: 'foo', selected: false }
    ];
}]);

Use the ng-repeat directive to render the models in your view script:

<table>
    <tr ng-repeat="row in rows" ng-click="toggleRow(row)">
         <td>{{ row.col1 }}</td>
         <td>{{ row.col2 }}</td>
    </tr>
</table>

Provide the toggleRow function in your controller to toggle the selected property on your row:

$scope.toggleRow = function (row) {
    row.selected = !row.selected;
}

Now you can track the selected rows from your controller, since each row has the selected property.

What would be the best way to find an angular element by class?

4 Answers4