同一DOM元素上的ng-repeat和ng-controller

Anup Vasudeva 发表于 Dev

阿努普·瓦苏德娃（Anup Vasudeva）

我们可以将ng-controller和ng-repeat附加到同一DOM元素吗？小提琴

这是HTML：

<table>
    <tbody ng-controller="UserController" ng-repeat="user in users" ng-click="toggleSelectedUser()" ng-switch on="isSelectedUser()">
        <tr>
            <td>{{user.name}}</td>
            <td>{{user.email}}</td>
        </tr>
        <tr ng-switch-when="true">
            <td colspan="2">
                {{user.desc}}
            </td>
        </tr>
    </tbody>
</table>

这是代码：

angular.module("myApp", [])     
    .controller("UserController", ["$scope", function($scope) {
        $scope.users = [
            {name : "Anup Vasudeva", email : "[email protected]", desc : "Description about Anup Vasudeva"},
            {name : "Amit Vasudeva", email : "[email protected]", desc : "Description about Amit Vasudeva"},
            {name : "Vijay Kumar", email : "[email protected]", desc : "Description about Vijay Kumar"}
        ];
        $scope.selected = false;

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

        $scope.isSelectedUser = function() {
            return $scope.selected;
        };
    }]);

我认为绑定ng-controller并绑定ng-repeat到相同的DOM元素是有意义的。ng-repeat创建的作用域可以由控制器管理。我想要的是变量selected对于每个范围应该是唯一的。

尚德马尼

您应该将控制器分为UserListController和UserController。用户列表应该是UserListController的一部分，并且每个项目都可以通过UserController

就像是

<table ng-controller='UserListController'>
        <tbody ng-controller="UserController" ng-repeat="user in users" ng-click="toggleSelectedUser()" ng-switch on="isSelectedUser()" ng-init="user=user">

因此，用户控制器变为

angular.module("myApp", [])     
    .controller("UserController", ["$scope", function($scope) {
        $scope.selected = false;

        $scope.toggleSelectedUser = function() {
            $scope.user.selected = !$scope.selected;
        };

        $scope.isSelectedUser = function() {
            return $scope.user.selected;
        };
    }]);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。