ng-repeat and ng-controller on the same DOM element

前端未结

关注

 2  444

萌比男神i 2021-02-06 03:54

Can we attach ng-controller and ng-repeat to the same DOM element? Fiddle

Here is the HTML:


        
          2条回答        

        
                    
            
            
                         
                
              
              
                
                   星月不相逢
                                             
                
                
                (楼主)
            
              
              
                2021-02-06 04:33
              

            
            
                        

  What I want is the variable selected should be unique for each scope.


Yes you can.

Multiple controller way

You can create root controller mainController and add to your model users new controller per user.

After that, call new controller in ng-repeat as ng-controller="user.ctrl"

Demo Fiddle

I would write something like:

HTML


    

    

        
      
      
      

        
            
                {{user.name}}
                {{user.email}}
            
            
                {{user.desc}}




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


However you can see we have code duplicate!!. Each "child" controller has the same logic:

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


If you want to make your code work, I would use ng-model.

Other way with ng-model

Demo 2 Fiddle

HTML


            
                {{user.name}}
                {{user.email}}
            
            
                {{user.desc}}
            
        


and controller with modified model:

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;
    };
});