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

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

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

Код


    Дополнительное задание 1
<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>
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}}

Задание №1

Код


    Задание 1
    
    
    
    
    
    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>
<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>

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

Задание №2

Код


    Задание 2
    
<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>

Выберите вопрос:

{{questions[n].question}}
<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>

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

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

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

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

       
<th ng-if = "visibleDescription">Description <td ng-if = "visibleDescription">{{task.description}}
Name Date Completed
{{task.name}} {{task.duedate}} {{task.completed}}

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

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


    // 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.mode = $scope.items; 

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

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

,

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

    


{{var.ans}}


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

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

$scope.mode = $scope.items; 

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

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

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

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

От этой проверки

, избавился, обращаясь к конкретному элементу
 

{{var.ans}}

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



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

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

Код

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