Changing JQuery function into AngularJS

Question

I am changing a user list/table I made with Razor and JQuery into AngularJS. One of the features of this table was the ability to show/hide additional user details. The table had two sets of tr with the second one being display:none but would slide down/be visible when its above tr was clicked to show details.

Example (Original) Working Example

I tried to apply the code onto my AngularJS but it does not seem to work for some reason (no errors either)

Original Code (skeleton)

<table>
   <tr class="col-xs-12">
            <td class="col-xs-2">@Html.DisplayFor(modelItem => item.name)</td>
            <td class="col-xs-2">@Html.DisplayFor(modelItem => item.email)</td>
            // ect...
   </tr>
   <tr class="col-xs-12" style="display:none">
      <td colspan="12">
         <p>
            @Html.DisplayFor(other stuff)
         </p>
      </td>
   </tr>
</table>

New AngularJS Code

<table class="table table-striped col-xs-12">
    <tbody ng-repeat="actors in Users">
        <tr class="col-xs-12">
            <td class="col-xs-2">{{actors.name}}</td>
            <td class="col-xs-2">{{actors.email}}</td>
            // ect...
        </tr>
        <tr class="col-xs-12" style="display:none">
            <td colspan="6">
                <p>
                    {{actors.otherThings}}
                </p>
            </td>
        </tr>
    </tbody>
</table>

JQuery (Original had td[colspan=12] instead of td[colspan=6])

<script>
    // Toggle Additional Details
    $(function () {
        $("td[colspan=6]").find("p").hide();
        $("td[colspan=6]").addClass("nopadding");

        // && !$(e.target).is('span')
        $("tr").click(function (e) {
            if (!$(e.target).is('button') && !$(e.target).is('input') && !$(e.target).is('select')) {
                var $target = $(this);
                var $detailsTd = $target.find("td[colspan=6]");
                if ($detailsTd.length) {
                    $detailsTd.find("p").slideUp();
                    $detailsTd.addClass("nopadding");
                } else {
                    $detailsTd = $target.next().find("td[colspan=6]");
                    $detailsTd.find("p").slideToggle();
                    $detailsTd.toggleClass("nopadding");
                }
            }
        });
    });
</script>

CSS

/* Removes padding from interactive rows */
.table > tbody > tr > td.nopadding {
    padding: 0px;
}

I am still new to AngularJS so maybe I am missing something simple, but I just want to be able to expand show/hide the additional tr. Not sure why it does not work for my Angular code.

AngularJS

var app = angular.module("app", ['ngRoute', 'ngResource']);

app.config(function ($routeProvider) {
    $routeProvider

    .when('/', {
        templateUrl: '/pages/home.html',
        controller: 'HomeController'
    })

    .when('/home', {
        templateUrl: '/pages/home.html',
        controller: 'HomeController'
    })

    .when('/unknown', {
        templateUrl: '/pages/unknown.html',
        controller: 'UnknownController'
    })
      .otherwise({
          templateUrl: '/pages/home.html',
          controller: 'HomeController'
      });
});


app.factory('userService', function ($http) {
    var userService = {};
    userService.getUsers = function () {
        return $http({
            url: '/API/APITest',
            method: "GET"
        })
    }
    return userService;
});


app.controller('HomeController', function ($scope, userService, $resource, $http) {
    $scope.orderByField = 'name';
    $scope.reverseSort = false;
    $scope.ordering = "(ascending)";

    $scope.orderByFieldFunction = function (value) {
        $scope.reverseSort = !$scope.reverseSort;
        $scope.orderByField = value;
        if ($scope.reverseSort === false) {
            $scope.ordering = "(ascending)";
        } else {
            $scope.ordering = "(descending)";
        }
    }
    userService.getUsers().success(function (users) {
        $scope.Users = users;
    });
});

app.controller('UnknownController', function ($scope, userService, $resource, $http) {
    $scope.title = "404 - Does Not Exist";
});

Answer 1

You can add the jQuery in a directive like this, if this is what you're after:

Example: http://jsfiddle.net/58mLfw6z/

AngularJS Directive

app.directive('showmore',function() {
    return {
        restrict:'A',
        link: function(scope,element,attr) {
            element.on('click',function() {
              element.next('tr').toggle();
            });    
        }
    }
});

// or apply a flag to the model with an ng-click on the tr
$scope.more = function(actor) {
    if (!actor.more) {
        actor.more = true;
    }
    else {
        actor.more = false;
    }
};

HTML

<table>
    <tbody ng-repeat="actors in Users">
        <tr showmore ng-click="more(actors)">
            <td class="col-xs-2">{{actors.name}}</td>
            <td class="col-xs-2">{{actors.email}}</td>
        </tr>
        <tr style="display:none;">
            <td colspan="2">
                <p>
                    {{actors.otherThings}}
                </p>
            </td>
        </tr>
    </tbody>
</table>

Answer 2

I think OP already has found the answer. This post is just to say that ng-repeat has its own scope, an isolated scope.

In this plnkr, http://jsfiddle.net/aanders50/HB7LU/5497/, which OP posted in the comment

<table>
    <tr>
        <th>Name</th>
        <th>Email</th>
    </tr>
    <tbody ng-repeat="actors in Users">            
        <tr ng-click="showDetails = ! showDetails">
            <td>{{actors.name}}</td>
            <td>{{actors.email}}</td>
        </tr>
        <tr ng-show="showDetails" style="background-color:rgba(0, 255, 255, 0.2)">
            <td colspan="2">
                <p>birthday: {{actors.birthday}}</p>
            </td>
        </tr>
    </tbody>
</table>

showDetails are bound to each tbody where ng-repeat is defined. Thus, each table has its own $scope.showDetails