Question

我正在将使用Razor和JQuery制作的用户列表/表格更改为AngularJS。此table的一个功能是显示/隐藏其他用户详细信息的功能。该表有两组tr，第二组为display:none，但在点击上方tr以显示详细信息时会向下滑动/显示。

示例（原创） Working Example

enter image description here

我尝试将代码应用到我的AngularJS上，但由于某种原因它似乎没有用（没有错误）

原始代码（骨架）

<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>

新的AngularJS代码

<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 （原件有td[colspan=12]而不是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;
}

我还是AngularJS的新手，所以也许我错过了一些简单的东西，但我只是希望能够展开显示/隐藏额外的tr。不知道为什么它对我的Angular代码不起作用。

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

你可以在这样的指令中添加jQuery，如果这是你所追求的：

示例：http://jsfiddle.net/58mLfw6z/

AngularJS指令

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

我认为OP已经找到了答案。这篇文章只是说ng-repeat有自己的范围，一个孤立的范围。

在此plnkr http://jsfiddle.net/aanders50/HB7LU/5497/中，OP在评论中发布了

<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绑定到定义tbody的每个ng-repeat。因此，每个表都有自己的$scope.showDetails

将JQuery函数更改为AngularJS

2 个答案: