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

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

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

 

Код
<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Дополнительное задание 1</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("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>
</head>
<body ng-controller="appCtrl">
    <div show-table ="arrObj"></div>
</body>
</html>

 

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

Задание 1

 

Код
<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Задание 1</title>

    <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>
</head>
<body ng-controller="appCtrl">
    <div paragraph="paragraphs"></div>
</body>
</html>

 

 

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

Задание 2

 

Код
<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Задание 2</title>

    <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>
</head>
<body ng-controller="appCtrl">
    <div my-menu="menuItems" menu-caption="caption" menu-url="url"></div>
</body>
</html>

 

 

Close