Задачи для решения

Работа с переменными

Даны 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>