AngularJS Essential. Урок 5. Фильтры. Домашнее задание.

Frontend developer Frontend Домашние задания
1

Дополнительное задание 1 (первый вариант)

В дополнительном задании задача стояла переделать учебный пример, реализовав возможность выбирать категорию сортировки вручную, используя для этого выпадающий список. Но ведь в самом примере есть только фильтрация по значению в колонке category. Сделал как фильтрацию, так и сортировку по нужному столбцу.

Фильтрация:

Код 

    Selecting Items

<script src="../Libraries/angular.js"></script>
<link href="../Libraries/bootstrap-theme.css" rel="stylesheet" />
<link href="../Libraries/bootstrap.css" rel="stylesheet" />

<script>
    angular.module("exampleApp", [])
        .controller("defaultCtrl", function ($scope) {
            $scope.items = [
               { name: "Item 1", price: 10.9, category: "Category 1", count: 10, tax: 1.12, expiration: 10 },
               { name: "Item 2", price: 1.1, category: "Category 1", count: 8, tax: 0.55, expiration: 12 },
               { name: "Item 3", price: 2.6, category: "Category 2", count: 7, tax: 0.22, expiration: 5 },
               { name: "Item 4", price: 17.5, category: "Category 2", count: 33, tax: 2.77, expiration: 10 },
               { name: "Item 5", price: 52.6, category: "Category 3", count: 7, tax: 1.24, expiration: 8 },
               { name: "Item 6", price: 102.6, category: "Category 3", count: 10, tax: 0.82, expiration: 15 },
               { name: "Item 7", price: 112.6, category: "Category 1", count: 27, tax: 0.2, expiration: 45 },
               { name: "Item 8", price: 8.6, category: "Category 2", count: 76, tax: 0.12, expiration: 15 }];

            $scope.selected = {};

            //Формируем массив уникальных значений свойства category массива items
            for (var i = 0; i < $scope.items.length; i  ) {
                $scope.selected[$scope.items[i].category] = true;
            }
            $scope.selected = Object.keys($scope.selected);

            $scope.cetegoryFilter = $scope.selected[0];

        });
</script>





<div class="panel panel-primary">
    <div class="panel-heading">
        <h3>
            Items in cart
            <span class="label label-info">{{items.length}}</span>
        </h3>
    </div>
    
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Category</th>
                <th>Count</th>
            </tr>
        </thead>
        <tbody>

            <tr ng-repeat="item in items | filter: { category : cetegoryFilter}">
                <td>{{item.name}}</td>
                <td>{{item.price | currency}}</td>
                <td>{{item.category}}</td>
                <td>{{item.count}}</td>
            </tr>
        </tbody>
    </table>
</div>

Filtering by: <select class="text-info" ng-options="item for item in selected" ng-model="cetegoryFilter"></select>

2

Дополнительное задание 1 (второй вариант)

Сортировка:

Код 

    Selecting Items

<script src="../Libraries/angular.js"></script>
<link href="../Libraries/bootstrap-theme.css" rel="stylesheet" />
<link href="../Libraries/bootstrap.css" rel="stylesheet" />

<script>
    angular.module("exampleApp", [])
        .controller("defaultCtrl", function ($scope) {
            $scope.items = [
               { name: "Item 1", price: 10.9, category: "Category 1", count: 10, tax: 1.12, expiration: 10 },
               { name: "Item 2", price: 1.1, category: "Category 1", count: 8, tax: 0.55, expiration: 12 },
               { name: "Item 3", price: 2.6, category: "Category 2", count: 7, tax: 0.22, expiration: 5 },
               { name: "Item 4", price: 17.5, category: "Category 2", count: 33, tax: 2.77, expiration: 10 },
               { name: "Item 5", price: 52.6, category: "Category 3", count: 7, tax: 1.24, expiration: 8 },
               { name: "Item 6", price: 102.6, category: "Category 3", count: 10, tax: 0.82, expiration: 15 },
               { name: "Item 7", price: 112.6, category: "Category 1", count: 27, tax: 0.2, expiration: 45 },
               { name: "Item 8", price: 8.6, category: "Category 2", count: 76, tax: 0.12, expiration: 15 }];

            $scope.selected = [];

            for (properety in $scope.items[0]){
                $scope.selected.push(properety);
            }

            $scope.cetegorySort = $scope.selected[0];

        });
</script>





<div class="panel panel-primary">
    <div class="panel-heading">
        <h3>
            Items in cart
            <span class="label label-info">{{items.length}}</span><br /><br />
        </h3>
    </div>
    
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Category</th>
                <th>Count</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items | orderBy: cetegorySort">
                <td>{{item.name}}</td>
                <td>{{item.price | currency}}</td>
                <td>{{item.category}}</td>
                <td>{{item.count}}</td>
            </tr>
        </tbody>
    </table>
</div>

Sorting by: <select class="text-info" ng-options="item for item in selected" ng-model="cetegorySort"></select>

3

Задание 1

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

Код 


    
    
    

<title>Задание 1</title>

<script>
    var records = [];

    angular.module("app", [])
    .controller("appCtrl", function ($scope) {

        $scope.records = records;

        $scope.addTask = function () {

            if ($scope.taskEvent

4

Задание 2

Код 


    

<script src="../Libraries/angular-locale_uk-ua.js"></script>

<link href="../Libraries/bootstrap.css" rel="stylesheet" />
<link href="../Libraries/bootstrap-theme.css" rel="stylesheet" />

<title>Задание 2</title>

<script>
    var records = [];

    angular.module("app", [])
    .controller("appCtrl", function ($scope) {

        $scope.records = records;

        $scope.dateFormats = [{ description: "EEEE, d. MMMM y", value: 'fullDate' },
            { description: "dd.MM.yy", value: 'shortDate' },
            { description: "d. MMMM y", value: 'longDate' },
            { description: "dd.MM.yyyy", value: 'mediumDate' }];

        $scope.sortFormats = [{ description: "Date", value: "duedate" },
            { description: "Event", value: "task" }];

        $scope.sortFormat = $scope.sortFormats[0];
        $scope.dateFormat = $scope.dateFormats[0];

        $scope.addTask = function () {

            if ($scope.taskEvent