AngularJS Essential. Урок 2. Использование привязок и стандартных директив. Домашнее задание.

  • 394 Просмотры
  • Последний пост 11 марта 2017
Maxim Shulga разместил пост 17 декабря 2016

Мое решение домашних заданий ко второму уроку. Может не стоит сюда весь код бросать, а только его основные части

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

 

Код
<!DOCTYPE html>
<html ng-app="calc">
<head>
    <title>Дополнительное задание 1</title>

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

        var calc = angular.module("calc", []);
        calc.controller("calcCtrl", function ($scope) {

            $scope.add = function () {
                $scope.result = parseFloat($scope.operand1) + parseFloat($scope.operand2);
            }

            $scope.sub = function () {
                $scope.result = parseFloat($scope.operand1) - parseFloat($scope.operand2);
            }

            $scope.mul = function () {
                $scope.result = parseFloat($scope.operand1) * parseFloat($scope.operand2);
            }

            $scope.div = function () {
                var operand1 = parseFloat($scope.operand1), operand2 = parseFloat($scope.operand2);

                if (operand2 == 0) { $scope.result = "Деление на ноль" }
                else {
                    $scope.result = operand1 / operand2;
                }
            }

        });
    </script>
</head>
<body ng-controller="calcCtrl">

    a = <input type="text" placeholder="Введите значение" ng-model="operand1">
    b = <input type="text" placeholder="Введите значение" ng-model="operand2">

    Арифметичекая операция:
    <input type="button" value="+" ng-click="add()" />
    <input type="button" value="-" ng-click="sub()" />
    <input type="button" value="*" ng-click="mul()" />
    <input type="button" value="/" ng-click="div()" /><br /><br />

    Результат: {{result}}

</body>
</html>

 

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

Задание №1 

 

Код 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="task">
<head>
    <title>Задание 1</title>
    <script src="../Libraries/angular.js"></script>
    <link href="../Libraries/bootstrap.css" rel="stylesheet" />
    <link href="../Libraries/bootstrap-theme.css" rel="stylesheet" />
    <script src="todo.js"></script>
    <script>

        var tasks = angular.module("task", []);

        tasks.controller("taskCtrl", function ($scope) {
            $scope.tasks = todoModel.read();
            $scope.newTask = null;

            $scope.visibleDescription = false;

            $scope.addItem = function () {
                todoModel.addItem($scope.newTask.name, $scope.newTask.duedate.toLocaleDateString(), $scope.newTask.description, ($scope.newTask.completed ? true : false));
                todoModel.save();
            }

            $scope.showDescription = function () {
                $scope.visibleDescription = true;
            }
        })

    </script>

</head>
<body ng-controller="taskCtrl">

    <div class="container">

        <h3>ToDo List</h3>

        <table class="table table-striped" ng-switch on = "visibleDescription">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Date</th>
                    <th>Completed</th>
                    <th ng-switch-when = "true">Description</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="task in tasks">
                    <td>{{task.name}}</td>
                    <td>{{task.duedate}}</td>
                    <td>{{task.completed}}</td>
                    <td ng-switch-when = "true">{{task.description}}</td>
                </tr>
            </tbody>
        </table>
        <button type="button" class="btn btn-default pull-right" ng-click="showDescription()">Детали</button>
        <div style="clear:both">
            <form role="form">
                <div class="form-group">
                    <label class="control-label" for="name">Name</label>
                    <input type="text" class="form-control" id="name" placeholder="Name" ng-model="newTask.name">
                </div>
                <div class="form-group">
                    <label class="control-label" for="date">Due Date</label>
                    <input type="date" class="form-control" id="date" placeholder="Date" ng-model="newTask.duedate">
                </div>
                <div class="form-group">
                    <label class="control-label" for="description">Description</label>
                    <textarea rows="2" class="form-control" id="description" placeholder="Description" ng-model="newTask.description"></textarea>
                </div>

                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="newTask.completed"> Completed
                    </label>
                </div>
                <button type="button" class="btn btn-default" ng-click="addItem()">Add</button>
            </form>
        </div>
    </div>
</body>
</html>

 

В первом задании, не знаю почему, но когда с помощью кнопки сначала сделать колонку Description видимой, а потом добавлять новые строки то во всех новых строках ячейки колонки Description не отображаются. Как эту проблему решить?

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

Задание №2

 

Код
<!DOCTYPE html>
<html ng-app="survey">
<head>
    <title>Задание 2</title>
    <script src="../Libraries/angular.js"></script>

    <script>
        var questions = [
                 { question: "1 + 1 =", answers: [ "2", "8", "9", "5" ], right: 0, select: -1, style: ""},
                 { question: "6 + 2 =", answers: [ "1", "7", "8", "10" ], right: 2, select: -1, style: ""},
                 { question: "10 + 1 =", answers: [ "7", "11", "13", "48" ], right: 1, select: -1, style:""},
                 { question: "15 - 1 =", answers: [ "10", "14", "16", "11" ], right: 1, select: -1, style: ""},
                 { question: "19 + 2 =", answers: [ "18", "26", "12", "21" ], right: 3, select: -1, style: ""}
        ];

        var survey = angular.module("survey", []);

         survey.controller("surveyCtrl", function ($scope) {
             $scope.questions = questions;
             $scope.selectQuestion = 0;
             $scope.complete = false;

             $scope.showResult = function () {
                 $scope.complete = true;
                 $scope.countRight = 0;

                 for (var i = 0; i < $scope.questions.length; i++) {

                     if ($scope.questions[i].right == $scope.questions[i].select) {
                         $scope.countRight++;
                         $scope.questions[i].style = "valid"

                     } else {
                         $scope.questions[i].style = "invalid";
                     }
                 }
             }
         })

    </script>
    <style>
        .valid{
            color:blue;
        }
        .invalid{
            color:red;
        }
    </style>
</head>

<body ng-controller="surveyCtrl">
    <p>Выберите вопрос:</p>
    <div ng-repeat="n in [0,1,2,3,4]">
        <input type="radio" value="{{n}}" ng-model="$parent.selectQuestion" name="selectQuestion" /> <span ng-class="questions[n].style" >{{questions[n].question}}</span> <br />
    </div>

    <p>Выберите правильный ответ:</p>
    <div ng-switch on="selectQuestion">
        <div ng-switch-when="0" ng-repeat="j in [0,1,2,3]">
            <input type="radio" value="{{j}}" ng-model="$parent.questions[0].select" name="checkQuestion0" /> {{questions[0].answers[j]}}<br />
        </div>
        <div ng-switch-when="1" ng-repeat="j in [0,1,2,3]">
            <input type="radio" value="{{j}}" ng-model="$parent.questions[1].select" name="checkQuestion1" /> {{questions[1].answers[j]}}<br />
        </div>
        <div ng-switch-when="2" ng-repeat="j in [0,1,2,3]">
            <input type="radio" value="{{j}}" ng-model="$parent.questions[2].select" name="checkQuestion2" /> {{questions[2].answers[j]}}<br />
        </div>
        <div ng-switch-when="3" ng-repeat="j in [0,1,2,3]">
            <input type="radio" value="{{j}}" ng-model="$parent.questions[3].select" name="checkQuestion3" /> {{questions[3].answers[j]}}<br />
        </div>
        <div ng-switch-when="4" ng-repeat="j in [0,1,2,3]">
            <input type="radio" value="{{j}}" ng-model="$parent.questions[4].select" name="checkQuestion4" /> {{questions[4].answers[j]}}<br />
        </div>
    </div> <br />

    <input type="button" name="showResult" value="Показать результат" ng-click="showResult()"/>
    <br/><br />

    <div ng-if="complete">
        Результат: Правильно {{countRight}} из {{questions.length}} 
    </div>
</body>
</html>

 

При решении второго задания пришлось использовать выражение $parent.selectQuestion, описание свойства $parent впервые затронут в третьем уроке.

Dmitriy Okhrimenko разместил пост 20 декабря 2016

Добрый день, Максим.

Для решения подобной задачи подойдет директива ng-if. Директива ng-swithc используется в таких же ситуациях как и обычный switch в JavaScript.

Попробуйте использовать следующий блок при построении таблицы:

       <table class="table table-striped">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Date</th>
                    <th>Completed</th>
                    <th ng-if = "visibleDescription">Description</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="task in tasks">
                    <td>{{task.name}}</td>
                    <td>{{task.duedate}}</td>
                    <td>{{task.completed}}</td>
                    <td ng-if = "visibleDescription">{{task.description}}</td>
                </tr>
            </tbody>
        </table>

  • Пост понравился
  • Maxim Shulga
Maxim Shulga разместил пост 20 декабря 2016

Попробовал, работает, без тех проблем что были с ng-switch, спасибо за подсказку 

Никита Остапенко разместил пост 13 января 2017

Здравствуйте!
Имеет ли право на жизнь, такой вариант решения?


 

    // module

    var testApp = angular.module("testApp", []);

    // controler

    testApp.controller("testAppCtrl", function($scope){

        $scope.items = [

            {name: "Любимое животное", value: "animal", variants:[

                { ans : "Horse"},

                { ans : "Dog"}, 

                { ans : "Cat"}, 

                { ans : "Racoon"}

            ]},

            {name: "Любимый цвет", value: "color", variants:[

                { ans : "Green"},

                { ans : "Red"},

                { ans : "Blue"},

                { ans : "Yellow"}

            ]},

            {name: "Любимая пора года", value: "season", variants:[

                { ans : "Summer"},

                { ans : "Winter"},

                { ans : "Autumn"},

                { ans : "Spring"}

            ]},

            {name: "Любимый напиток", value: "drink", variants:[

                { ans : "Tea"},

                { ans : "Water"},

                { ans : "Alcohol"},

                { ans : "Coffe"}

            ]},

            {name: "Сколько вы спите", value: "sleep", variants:[

                { ans : "10 ours"},

                { ans : "8 ours"},

                { ans : "6 ours"},

                { ans : "Im Batman."}

            ]}

        ];

 

        $scope.mode = $scope.items;

        $scope.answer1 = $scope.items[0].variants;

        $scope.answer2 = $scope.items[1].variants;

        $scope.answer3 = $scope.items[2].variants;

        $scope.answer4 = $scope.items[3].variants;

        $scope.answer5 = $scope.items[4].variants;

        $scope.complete = false;

        $scope.showResult = function(){

            $scope.answers = [{ans: $scope.answer1.ans},{ans: $scope.answer2.ans}, {ans: $scope.answer3.ans}, {ans: $scope.answer4.ans}, {ans: $scope.answer5.ans}]

            if (($scope.answer1.ans && $scope.answer2.ans && $scope.answer3.ans && $scope.answer4.ans && $scope.answer5.ans) === undefined){

                alert("Вы ответили не на все вопросы");

            }

            else{

                $scope.complete = true;

            }

        }

    });

    </script>

    <div class="container" ng-controller="testAppCtrl">

        <div class="quest-wrap">

            <div>Выберите вопрос:</div>

            <div ng-repeat="item in items" class="quest">

                <label>{{item.name}}<input type="radio" name="oneTest" value="{{item.value}}" ng-model="mode.value" /></label>

            </div>

        </div>

        <div class="variants-wrap" ng-switch on="mode.value">

            <div ng-switch-when="animal">

                <div ng-repeat="item in items" ng-if="$index == 0">

                    <label ng-repeat="var in item.variants">

                        {{var.ans}}

                        <input type="radio" value="{{var.ans}}" ng-model="answer1.ans" name="first" />

                    </label>

                </div>

            </div>

            <div ng-switch-when="color">

                <div ng-repeat="item in items" ng-if="$index == 1">

                    <label ng-repeat="var in item.variants">

                        {{var.ans}}

                        <input type="radio" value="{{var.ans}}" ng-model="answer2.ans" name="second" />

                    </label>

                </div>

            </div>

            <div ng-switch-when="season">

                <div ng-repeat="item in items" ng-if="$index == 2">

                    <label ng-repeat="var in item.variants">

                        {{var.ans}}

                        <input type="radio" value="{{var.ans}}" ng-model="answer3.ans" name="third" />

                    </label>

                </div>

            </div>

            <div ng-switch-when="drink">

                <div ng-repeat="item in items" ng-if="$index == 3">

                    <label ng-repeat="var in item.variants">

                        {{var.ans}}

                        <input type="radio" value="{{var.ans}}" ng-model="answer4.ans" name="fourth" />

                    </label>

                </div>

            </div>

            <div ng-switch-when="sleep">

                <div ng-repeat="item in items" ng-if="$index == 4">

                    <label ng-repeat="var in item.variants">

                        {{var.ans}}

                        <input type="radio" value="{{var.ans}}" ng-model="answer5.ans" name="fifth" />

                    </label>

                </div>

            </div>

        </div>

        <button class="btn btn-default" ng-click="showResult()">result</button>

        <div ng-if="complete">

        <div>

            Результат:    

        </div>

            <table class="table">

                <thead>

                    <tr>

                        <th ng-repeat="item in items">{{item.value}}</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td ng-repeat="item in answers">

                            {{item.ans}}

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

Maxim Shulga разместил пост 14 января 2017

Изложу свое мнение относительно приведенного примера, хотя это может выглядеть как в той фразе, что слепой ведет слепого, и в итоге оба попадут в яму. Оттолкнусь от приведенной модели данных.

Думаю

$scope.mode = $scope.items; 

можно было не использовать, а напрямую брать нужное свойство через $scope.items. То же касается и создания переменных $scope.answer1 .. $scope.answer4.

От этих пяти дивов  избавиться (не от их содержимого):

<div ng-repeat="item in items" ng-if="$index == индекс">, 

заменив во вложенном содержимом нужный элемент item на items[индекс]. Пример для последнего блока:

    <div ng-switch-when="sleep">
            <label ng-repeat="var in items[4].variants">
                {{var.ans}}
                <input type="radio" value="{{var.ans}}" ng-model="items[4].variants.ans" name="fifth" />
            </label>
    </div>

В конце нам показываются наши ответы, согласно задания вроде нужно отобразить результаты теста, как я понимаю это сколько ответов правильных (и возможно какие именно).

Никита Остапенко разместил пост 18 января 2017

Спасибо за ответ, обсуждение в любом случаи полезно!)

$scope.mode = $scope.items; 

я заменил на $scope.mode = $scope.items[0].value;
И все отлично, всегда выбран первый пункт, изначально при загрузке страницы.

С вложенными элементами такой номер не прокатил.

Изначально не получается сделать первый элемент чекнутым.

$scope.answer1 = $scope.items[0].variants;

От этой проверки <div ng-repeat="item in items" ng-if="$index == индекс">, избавился, обращаясь к конкретному элементу 

 <div ng-switch-when="animal">
      <label ng-repeat="var in answer1">
{{var.ans}} <input type="radio" value="{{var.ans}}" ng-model="answer1.ans" name="first" /> </label> </div>

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



Віталій Строїнов разместил пост 04 марта 2017

Здравствуйте! Я делал задание 2 по схеме тестов на ITVDN - есть 5 "вопросов" и "Завершить тест". Но когда я на каком-то вопросе отмечаю радио с вариантом ответа и перехожу на следующий вопрос, то состояние отмеченного радио не запоминается и он становится неотмеченным. И так с любым вопросом. Запоминается только радио, которое было отмечено последним перед нажатием на кнопку "Завершить тест". Соотвественно, и результат выдает, что правильных ответов 1 из 5, потому что 4 остальных неотмеченные. Как можно решить эту проблему?

Ниже код. Правильные ответы - все первые варианты.
Спасибо!

 

Код

Maxim Shulga разместил пост 11 марта 2017

Секция кода ничего не содержит. Добавь код плз.

Close