Как установить высоту тела равную длине массива в угловых

0

У меня есть этот список пользователей, который может динамически расти, если вы добавляете нового пользователя. Теперь я хочу, чтобы все мое тело было длиной списка пользователей.

На моей фабрике я определяю длину массива, и теперь мне нужно знать, как получить/перевести это на представление в угловом. Что-то вроде этого:

<div class="mainWrapper" id="mainView" style="width: {{gridSizeNG.x * 122}}px; height: {{gridSizeNG.y *  the length of the user list }}">

...

</div>

Часть моего заводского кода:

UserService.getUsers = function () {
        $http.get("api/users") //your API url goes here
            .success(function(dataFromServer){
                //console.log('LOGGING DATADROMSERVER ', dataFromServer);
                //UserService.userList = [];

                /*dataFromServer.forEach(function(user, index, arr) { 
                    UserService.userList.push(user); 
                })*/
                var initials = function(name){
                    var d1 = name.split(" ")[0].charAt(0).toUpperCase();
                    var d2;
                    try
                    {
                        d2 = name.split(" ")[1].charAt(0).toUpperCase();
                    }
                    catch(e){
                        d2 = "";
                    }

                    return  d1 + d2;
                    console.log('LOGGING INITIALS ', d1 + d2);
                }    

                for (var i = 0; i < dataFromServer.length; i++) {
                    UserService.userList[i] = dataFromServer[i];

                    UserService.userList[i].initials = initials(UserService.userList[i].name)                    
                };

                console.log('#### logging lenght of the userlist ' , UserService.userList.length );

                //here you should update the usersList from the server like this:
                //UserService.usersList = dataFromServer;

                return dataFromServer;
            })
            .error(function(errorFromServer){
            //something went wrong, process the error here
                console.log("Error in getting the users from the server");
            })
        };

      return UserService;
    })

Как видно из изображения, высота тела теперь не динамическая Изображение 174551

Теги:

1 ответ

0

ИМО лучшим подходом здесь будет использование CSS в ваших интересах и увеличение размера в соответствии с количеством элементов, которые у вас есть. Что означает (идеально), вам не нужно устанавливать свойство высоты и ширины в CSS, вам нужно только установить свойства max-height и max-width, если список будет больше, чем тело.

Если вы хотите контролировать высоту и ширину с помощью JS, используйте стиль ng вместо стиля, помните, что ng-стиль считается последним средством управления стилями, в идеале следует использовать ng-класс, если это возможно.

С ng-style вы сможете использовать переменные области видимости для управления высотой и шириной.

Также попробуйте использовать что-то вроде этого, используя существующий html-код:

<div class="mainWrapper" id="mainView" style="width: {{gridSizeNG.x}} * 122 + 'px'; height: {{gridSizeNG.y}} * {{the length of the user list }} + 'px'">

...

</div>

Не уверен, что этот код будет работать, но ng-style будет.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню