9

我们可以将 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 : "anup.vasudeva2009@gmail.com", desc : "Description about Anup Vasudeva"},
            {name : "Amit Vasudeva", email : "amit.vasudeva2009@gmail.com", desc : "Description about Amit Vasudeva"},
            {name : "Vijay Kumar", email : "vijay.kumar@gmail.com", 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每个范围的变量应该是唯一的。

4

2 回答 2

11

你应该把你的控制器分成UserListControllerand 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;
        };
    }]);
于 2013-10-25T12:13:09.300 回答
1

我想要的是选择的变量对于每个范围应该是唯一的。

是的你可以。

多控制器方式

您可以为每个用户创建根控制器mainController并将新控制器添加到您的模型中。users

之后，在 ng-repeat 中调用新控制器为ng-controller="user.ctrl"

演示Fiddle

我会写这样的东西：

HTML

<div ng-controller="mainController">
    <table>
        <tbody ng-repeat="user in users" ng-controller="user.ctrl" 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" style="padding-left: 10px">{{user.desc}}</td>
            </tr>
        </tbody>
    </table>
</div>

JS

var fessmodule = angular.module('myModule', []);

fessmodule.controller('mainController', function ($scope) {
    $scope.users = [{
        ctrl: fooCtrlA,
        name: "AAAAA",
        email: "a2009@gmail.com",
        desc: "Description about AAAA"
    }, {
        ctrl: fooCtrlB,
        name: "BBBBB",
        email: "b2009@gmail.com",
        desc: "Description about BBBBB"
    }, {
        ctrl: fooCtrlC,
        name: "CCCCC",
        email: "c2009@gmail.com",
        desc: "Description about CCCC"
    }];
});

fessmodule.$inject = ['$scope'];

function fooCtrlA($scope) {
    $scope.selected = true;
    $scope.toggleSelectedUser = function () {
        $scope.selected = !$scope.selected;
    };
    $scope.isSelectedUser = function () {
        return $scope.selected;
    };
}

function fooCtrlB($scope) {
    $scope.selected = false;
    $scope.toggleSelectedUser = function () {
        $scope.selected = !$scope.selected;
    };
    $scope.isSelectedUser = function () {
        return $scope.selected;
    };
}

function fooCtrlC($scope) {
    $scope.selected = false;
    $scope.toggleSelectedUser = function () {
        $scope.selected = !$scope.selected;
    };
    $scope.isSelectedUser = function () {
        return $scope.selected;
    };
}

但是你可以看到我们有重复的代码！！. 每个“子”控制器都有相同的逻辑：

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

如果你想让你的代码工作，我会使用ng-model.

ng-model 的其他方式

演示 2Fiddle

HTML

<tbody ng-repeat="user in users" ng-click="toggleSelectedUser(user)" ng-switch on="isSelectedUser(user)">
            <tr ng-model="user">
                <td>{{user.name}}</td>
                <td>{{user.email}}</td>
            </tr>
            <tr ng-switch-when="true">
                <td colspan="2" style="padding-left: 10px">{{user.desc}}</td>
            </tr>
        </tbody>

和带有修改模型的控制器：

var fessmodule = angular.module('myModule', []);

fessmodule.controller('mainController', function ($scope) {
    $scope.users = [{
        selected: false,
        name: "AAAAA",
        email: "a2009@gmail.com",
        desc: "Description about AAAA"
    }, {
        selected: false,
        name: "BBBBB",
        email: "b2009@gmail.com",
        desc: "Description about BBBBB"
    }, {
        selected: false,
        name: "CCCCC",
        email: "c2009@gmail.com",
        desc: "Description about CCCC"
    }];


    $scope.toggleSelectedUser = function (user) {
        user.selected = !user.selected;
    };
    $scope.isSelectedUser = function (user) {
        return user.selected;
    };
});
于 2013-10-25T12:28:36.853 回答