ngRoute не может получить данные из одного представления в другое - PullRequest
Новая
       23

ngRoute не может получить данные из одного представления в другое

0 голосов
/ 03 февраля 2020

Angular. JS проблема со значением ng-repeat со входов

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

Я очень плохо знаком с angular JS, поэтому я пытаюсь создать простое в использовании приложение для изучения основ.

На новом элементе. html На странице есть форма с функцией Add (). Есть два входа для проекта и название. Есть кнопка для добавления нового элемента to do.

Как только кнопка нажата и она запускает функцию Add (), она должна добавить новый объект в массив toDoList с Project и Task.

На домашней странице. html Я хочу отобразить название проекта и детали задачи. Позже я хочу сгенерировать всю строку при каждом клике, но сейчас я просто пытаюсь изменить текст.

Я, очевидно, здесь упускаю что-то очевидное, я прочитал документацию по ng-repeat и ng-model, но просто не могу это сделать asp.

index. html

<!DOCTYPE html>
<html lang="en" ng-app="ToDoListApp">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To Do App</title>
    <script src="angular/angular.min.js"></script>
    <script src="angular-route/angular-route.min.js"></script>
    <script src="app.module.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="app/assets/css/home.css">
    <link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/4c765e5630.js" crossorigin="anonymous"></script>
</head>

<body ng-view ng-controller="toDoCtrl">


    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
    </script>
</body>

</html>

homePage. html

<div class="row header">
    <div class="col-12">
        <h1>DOINGO</h1>
        <p>0 Open Tasks</p>
    </div>
</div>
<div class="row toDoList">

    <div class="row newItem">
        <div class="col-2">
            <button class="itemComplete btn"><i class="far fa-check-circle fa-2x"></i></button>
        </div>
        <div class="col-8">
            <h4 ng-repeat="Project in ToDoList">{{ToDoList.Project}}</h4>
            <p ng-repeat="Task in ToDoList">{{ToDoList.Task}}.</p>
        </div>
        <div class="col-2">
            <button class="btn deleteItem"><i class="far fa-times-circle fa-2x"></i></button>
        </div>
    </div>

</div>

<div class="row addItemRow">
    <div class="col-12 text-center">
        <a href="#/newItem"><button type="button" class="btn btn addItem">
                <i class="fas fa-plus-circle fa-3x"></i>
            </button></a>
    </div>
</div>

newItem . html

    <div class="row header">
        <div class="col-12">
            <h1>DOINGO</h1>
        </div>
    </div>
    <div class="row addNewItem">
        <form ng-submit='Add()' class="form">
            <div class="row projectInput text-center">
                <div class="col-12">
                    <input type="text" ng-model="ToDoList.Project" placeholder="Enter a project title" ng-required>
                </div>
            </div>
            <div class="row taskInput text-center">
                <div class="col-12">
                    <input type="text" ng-model="ToDoList.Task" placeholder="Enter your task details" ng-required>
                </div>
            </div>
            <div class="buttonRow row">
                <div class="col-12 text-center">
                    <a href="#/"><button type="submit" class="btn-lg btn-success addItemButton">Add</button></a>
        </form>
        <a href="#/"><button class="btn-lg btn-danger cancelButton">Cancel</button></a>
    </div>
    </div>
    </div>

app.module. js

var app = angular.module('ToDoListApp', ['ngRoute']);

app.config(function ($routeProvider, $locationProvider) {

    $locationProvider.hashPrefix('');

    $routeProvider   
    .when("/", {
        templateUrl: "app/home/homePage.html",
        controller: "toDoCtrl"
    })
    .when("/newItem", {
        templateUrl: "app/newItem/newitem.html",
        controller: "toDoCtrl"
    })
    .otherwise({
        redirectTo: '/'
    })
});

//main controller for app functionality

app.controller('toDoCtrl', function ($scope) {

    $scope.ToDoList = []

    //add the new to do item to the array
    $scope.Add = function () {
        $scope.ToDoList.push({
            Project: $scope.Project,
            Task: $scope.Task
        });
        $scope.Project = '';
        $scope.Task = '';
    };
});
...