AngularJS Essential. Урок 6. Создание пользовательских директив. Домашнее задание.

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

Дополнительное задание 1

Код 


    Дополнительное задание 1

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

<script >
    angular.module("app", [])
    .controller("appCtrl", function ($scope) {
        $scope.arrObj = [
            { head1: "First name", head2: "Last name" },
            { firstName: "Ivan", lastName: "Ivanov" },
            { firstName: "Petr", lastName: "Petrov" },
            { firstName: "Sidorov", lastName: "Kirill" }
        ]
    })

    .directive("showTable", function () {
        return function (scope, element, attributes) {

            var data = scope[attributes['showTable']];

            if (angular.isArray(data)) {

                var tbl = angular.element("<table>");
                var tr, thead, tbody;

                tbl.addClass("table table-bordered table-striped table-hover");

                thead = angular.element("<thead>")
                tr = angular.element("<tr>")

                for (property in data[0]) tr.append(angular.element("<th>").text(data[0][property]));

                thead.append(tr);
                tbl.append(thead);

                tbody = angular.element("<tbody>")

                for (var i = 1; i < data.length; i  ) {
                    tr = angular.element("<tr>")
                    for (property in data[i]) tr.append(angular.element("<td>").text(data[i][property]));
                    tbody.append(tr);
                }

                tbl.append(tbody);
                element.append(tbl);
            }
        }
    })
</script>

2

Задание 1

Код 


    Задание 1

<script src="../Libraries/angular.js"></script>

<script>
    angular.module("app",[])
     .controller("appCtrl", function ($scope) {
         $scope.paragraphs = ["Paragraph 1", "Paragraph 2", "Paragraph 3", "Paragraph 4"];
        })
    .directive("paragraph", function () {
        return {
            link: function (scope, element, attributes) {
                scope.data = scope[attributes["paragraph"]];
            },
            restrict: "A",
            scope: true,
            replace: true,
            template: "<p ng-repeat = 'item in data' >{{item}}</p>"
        }
    })
</script>

3

Задание 2

Код 


    Задание 2

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

<script src="../Libraries/angular.js"></script>

<script>
    angular.module("app",[])
     .controller("appCtrl", function ($scope) {
         $scope.menuItems = [
             { caption: "Google", url: "https://www.google.com.ua/" },
             { caption: "Yandex", url: "https://www.yandex.ua" },
             { caption: "Bing", url: "https://www.bing.com" }

         ];
        })
    .directive("myMenu", function () {
        return function (scope, element, attributes) {

                var caption = attributes["menuCaption"];
                var url = attributes["menuUrl"];
                var data = scope[attributes["myMenu"]];

                if (angular.isArray(data)) {

                    element.addClass("btn-group");

                    var item = angular.element("<button>");

                    item.attr("type", "button")
                        .attr("data-toggle", "dropdown")
                        .attr("aria-haspopup", "true")
                        .attr("aria-expanded", "false")
                        .addClass("btn btn-default dropdown-toggle")
                        .text("Menu ")
                        .append(angular.element("<span>").addClass("caret"));

                    element.append(item);

                    var ul = angular.element("<ul>").addClass("dropdown-menu");
                    var li, a;

                    for (var i = 0; i < data.length; i  ) {

                        li = angular.element("<li>");
                        a = angular.element("<a>");

                        a.attr("href", data[i][url])
                            .text(data[i][caption]);

                        li.append(a);
                        ul.append(li);
                    }

                    element.append(ul);
                }
        }
    })
</script>