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

  • 46 Просмотры
  • Последний пост 23 декабря 2016
Maxim Shulga разместил пост 22 декабря 2016

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

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

Фильтрация:

 

Код
<html ng-app="exampleApp">
<head>
    <title>Selecting Items</title>

    <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>
</head>
<body ng-controller="defaultCtrl">

    <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>
</body>
</html>

 

Отсортировать по: Стандартный | Последний | Голоса
Maxim Shulga разместил пост 22 декабря 2016

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

Сортировка:

 

Код
<html ng-app="exampleApp">
<head>
    <title>Selecting Items</title>

    <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>
</head>
<body ng-controller="defaultCtrl">

    <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>
</body>
</html>

 

Maxim Shulga разместил пост 22 декабря 2016

Задание 1

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

 

Код
<!DOCTYPE html>
<html ng-app="app">
<head>
    <script src="../Libraries/angular.js"></script>
    <link href="../Libraries/bootstrap-theme.css" rel="stylesheet" />
    <link href="../Libraries/bootstrap.css" rel="stylesheet" />

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

    <script>
        var records = [];

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

            $scope.records = records;

            $scope.addTask = function () {

                if ($scope.taskEvent && $scope.dudateRecord) {

                    $scope.records.push({ task: $scope.taskEvent, duedate: $scope.dudateRecord.toLocaleDateString() });

                    $scope.taskEvent = undefined;
                    $scope.dudateRecord = undefined;
                }
            }


        })

    </script>
</head>
<body ng-controller="appCtrl">
    <div class="form-inline">
        Date: <input type="date" class="form-control" ng-model="dudateRecord" />
        Event: <input type="text" class="form-control" ng-model="taskEvent" />
        <input type="button" class="btn btn-primary" value="Add" ng-click="addTask()" />
    </div><br />

    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Date</th>
                <th>Event</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in records |  orderBy:'task' | orderBy:'duedate' ">
                <td>{{item.duedate}}</td>
                <td>{{item.task}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

Maxim Shulga разместил пост 23 декабря 2016

Задание 2

 

Код
<!DOCTYPE html>
<html ng-app="app">
<head>
    <script src="../Libraries/angular.js"></script>

    <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 && $scope.dudateRecord) {

                    $scope.records.push({ task: $scope.taskEvent, duedate: $scope.dudateRecord });

                    $scope.taskEvent = undefined;
                    $scope.dudateRecord = undefined;
                }
            }

        })

    </script>
</head>
<body ng-controller="appCtrl">

        <div class="form-inline">
            Date: <input type="date" class="form-control" ng-model="dudateRecord" />
            Event: <input type="text" class="form-control" ng-model="taskEvent" />
            <input type="button" class="btn btn-primary" value="Add" ng-click="addTask()" />
        </div><br />
        <p>Format date: <select class="text-info" ng-options="item.description for item in dateFormats" ng-model="dateFormat"></select></p>
        <p>Sorting by: <select class="text-info" ng-options="item.description for item in sortFormats" ng-model="sortFormat"></select></p>

        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Event</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in records |  orderBy: sortFormat.value ">
                    <td>{{item.duedate | date : dateFormat.value}}</td>
                    <td>{{item.task}}</td>
                </tr>
            </tbody>
        </table>
</body>
</html>

 

Да, и вопрос: в задании сказано добавить возможность пользователю выбирать способ сортировки (по дате, количеству отображаемых записей). Что за сортировка по количеству отображаемых записей, поскольку есть только две колонки - это дата записи и сама запись? Или нужно еще было как то группировать записи по дате? (у меня реализовано выбор способов сортировки между датой и названием события).

Maxim Shulga разместил пост 23 декабря 2016

Последнее задание

 

Код
<!DOCTYPE html>
<html ng-app="app">
<head>
    <script src="../Libraries/angular.js"></script>

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

    <script>

        angular.module("app", [])
        .controller("appCtrl", function ($scope) {
            $scope.numbArray = [1, 2, 5, 8, 4, 6, 33, 9, 7, 12, 11];
        })

        angular.module("app").
        filter("diferentSort", function () {
            return function (arr) {

                var subSort = function (num1, num2) {
                    if (num1 < num2) {
                        return -1;
                    }
                    else if (num1 > num2) {
                        return 1;
                    }
                    else {
                        return 0;
                    }
                }

                var arrEven = [], arrOdd = [];

                for (var i = 0, len = arr.length; i < len; i++) {
                    if (arr[i] % 2 == 0) arrEven.push(arr[i]);
                    else arrOdd.push(arr[i]);
                }

                return (arrEven.sort(subSort)).concat(arrOdd.sort(subSort));
            }
        })
    </script>
</head>
<body ng-controller="appCtrl">
    <span ng-repeat="item in numbArray | diferentSort ">{{item}} </span>
</body>
</html>

 

 

Close