У меня есть этот список пользователей, который может динамически расти, если вы добавляете нового пользователя. Теперь я хочу, чтобы все мое тело было длиной списка пользователей.
На моей фабрике я определяю длину массива, и теперь мне нужно знать, как получить/перевести это на представление в угловом. Что-то вроде этого:
<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;
})
Как видно из изображения, высота тела теперь не динамическая
ИМО лучшим подходом здесь будет использование 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 будет.