Задачи для решения
Работа с переменными
Даны 3 переменные: $scope.name со значением 'Иван', $scope.surname со значением 'Иванов' и $scope.age со значением 25. По заходу на страницу выведите каждую переменную в свой абзац.
Дан объект с юзером:
var langs = {
name: 'Иван',
surname: 'Иванов',
age: '25',
}
Выведите данные из этого объекта как показано ниже:
Иванов Иван, 25 лет
Работа с массивами
Дан массив языков ['html', 'css', 'js', 'php']. Выведите эти языки в виде списка <ul>.
Дан массив городов и их стран:
var langs = {
Минск: 'Беларусь',
Москва: 'Россия',
Киев: 'Украина',
}
Выведите эти города в виде списка <ul> как показано ниже:
<ul>
<li>Беларусь: Минск</li>
<li>Россия: Москва</li>
<li>Украина: Киев</li>
</ul>
Дан массив работников:
var workers = [
{name: 'Коля', age: 30, salary: 400},
{name: 'Вася', age: 31, salary: 500},
{name: 'Петя', age: 32, salary: 600},
];
Выведите этих работников в виде списка <ul> как показано ниже:
<ul>
<li>Имя: Коля, возраст: 30, зарплата: 400</li>
<li>Имя: Вася, возраст: 31, зарплата: 500</li>
<li>Имя: Петя, возраст: 32, зарплата: 600</li>
</ul>
Работа с событиями
Дана переменная $scope.name со значением 'Иван'. По заходу на страницу запишите эту переменную в абзац. Сделайте ссылку, по клику на которую 'Иван' поменяется на 'Дима'.
Даны 3 переменные: $scope.name со значением 'Иван', $scope.surname со значением 'Иванов' и $scope.age со значением 25. По заходу на страницу выведите каждую переменную в свой абзац. Сделайте 3 ссылки: сменить имя, сменить фамилию и сменить возраст. По клику на эти ссылки должны меняться соответствующие значения на 'Петр', 'Сидоров', 30.
Дан массив языков ['html', 'css', 'js', 'php']. Выведите эти языки в виде списка <ul>. Сделайте ссылку, по клику на которую 'php' поменяется на 'sql'.
Дан массив языков ['html', 'css', 'js', 'php']. Выведите эти языки в виде списка <ul>. Сделайте ссылку, по клику на которую в конец списка добавится язык 'sql'.
Дан массив языков ['html', 'css', 'js', 'php']. Выведите эти языки в виде списка <ul>. Сделайте ссылку, по клику на которую в начало списка добавится язык 'sql'.
Дан массив языков ['html', 'css', 'js', 'php']. Выведите эти языки в виде списка <ul>. Сделайте ссылку, по клику на которую язык 'php' удалится из списка.
Дан массив языков ['html', 'css', 'js', 'php']. Выведите эти языки в виде списка <ul>. Сделайте ссылку, по клику на которую язык 'html' удалится из списка.
Закрепление
Дан массив с числами. Выведите эти числа каждое в своем <span> так, чтобы на выводе к каждому числу прибавлялось число 3.
Дан массив с числами. Выведите эти числа каждое в своем <span> так, чтобы выводились квадраты этих чисел.
Дан массив [1, 2, 3, 4, 5]. Выведите его в виде списка <ul>. По нажатию на ссылку сделайте так, чтобы пункты этого списка шли в обратном порядке.
Дан массив с числами. Выведите его в виде списка <ul>. По нажатию на ссылку отсортируйте пункты этого списка.
Дан массив языков ['html', 'css', 'js', 'php']. Выведите эти языки в виде списка <ul>. Сделайте ссылку со следующим функционалом: по первому клику вместо 'html' сделайте 'html+', по второму клику вместо 'css' сделайте 'css+' и так далее пока элементы не закончатся.
Дан массив пользователей ['Коля', 'Вася', 'Петя']. Выведите этих пользователей в виде списка <ul>. Дан еще один массив ['Света', 'Валя', 'Маша']. Сделайте ссылку со следующим функционалом: по первому клику в конец списка <ul> добавится 'Света', по второму клику 'Валя' и так далее пока элементы во втором массиве не закончатся. Как только добавится последний элемент - пункты списка <ul> должны стать в отсортированном порядке.
Дан массив с числами [[1, 2, 3], [4, 5, 6], [7, 8, 9]]. Выведите эти числа в виде таблицы <table> по 3 числа в одном ряду.
Дан массив стран:
var workers = {
Беларусь: ['Минск', 'Могилев'],
Россия: ['Москва', 'Питер'],
Украина: ['Киев', 'Львов'],
};
Выведите эти страны в виде списка <ul> как показано ниже:
<ul>
<li>Беларусь: <span>Минск</span> <span>Могилев</span></li>
<li>Россия: <span>Москва</span> <span>Питер</span></li>
<li>Украина: <span>Киев</span> <span>Львов</span></li>
</ul>
Решение:
myApp.controller('MyController', function MyController($scope) {
$scope.countries = {
Беларусь: ['Минск', 'Могилев'],
Россия: ['Москва', 'Питер'],
Украина: ['Киев', 'Львов']
};
});
<ul>
<li ng-repeat="(country, cities) in countries">
{{country}}: <span ng-repeat="city in cities">{{city}} </span>
</li>
</ul>