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

コントローラーを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;
        };
    }]);
于 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 に答える