Показать форму OnClick в NavBar AngularJs - PullRequest
0 голосов
/ 08 ноября 2018

я впервые пишу код проекта angularjs, и я не могу понять, как оставить форму скрытой, пока не будет нажата определенная кнопка на панели навигации. Кажется, я не могу спрятать или заставить кнопку щелкнуть должным образом, так как я не очень разбираюсь в объектах контроллера и других функциях angularjs. Пожалуйста, помогите, если сможете. Заранее спасибо.

Вот код

    <!DOCTYPE html>

<head>
    <meta charset="utf-8"/>


    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />

    <!-- The main CSS file -->
    <link href="style.css" rel="stylesheet" />

    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>



<body ng-app>

    <div ng-app="myApp" ng-controller="myCtrl">
    <nav class="{{active}}" >

        <a href="#" class="AddItem"  ng-click="showForm = true">Add Item </a>
        <a href="#" class="DeleteItem">Delete Item</a>
        <a href="#" class="DisplayItem">Display Item</a>
        <a href="#" class="BorrowItem">Borrow Item</a>
        <a href="#" class="ReturnItem">Return Item</a>

    </nav>

        <form ng-show="showForm"ng-submit="submitForm()">
            <h1>Add Items</h1>

            <div layout="column"       layout-align="center center">
                <div> <button class="additmbtn" onclick="">Add Book</button></div>
                <div><button class="additmbtn" onclick="">Add DVD</button></div>
            </div>
        </form>

    </div>

        <script>
            var myApp = angular.module('myApp', []);

            myApp.controller('myCtrl', ['$scope',
                function($scope) {
                    $scope.showForm = false;

                    // init empty user object for our form
                    $scope.user = {};

                    $scope.submitForm = function() {
                        // logic when the form is submitted
                        //...
                    };

                }
            ]);
        </script>




</body>

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Ваш код выглядит нормально и отлично работает здесь . Я создал plunker вашего кода. Пожалуйста, проверьте и не забудьте включить угловую библиотеку в ваше приложение, которое отсутствовало. И работает так, как вы ожидаете, чтобы сделать форму видимой при нажатии на ссылку Добавить элемент .

    <nav>
        <a href="#" class="AddItem" ng-click="showForm=true">Add Item</a>
        <a href="#" class="DeleteItem">Delete Item</a>
        <a href="#" class="DisplayItem">Display Item</a>
        <a href="#" class="BorrowItem">Borrow Item</a>
        <a href="#" class="ReturnItem">Return Item</a>
    </nav>
    <form ng-show="showForm" ng-submit="submitForm()">
      <h1>Add Items</h1>
      <div layout="column" layout-align="center center">
        <button class="additmbtn" onclick="">Add Book</button>
        <button class="additmbtn" onclick="">Add DVD</button>
      </div>
    </form>
0 голосов
/ 08 ноября 2018

Проблема в том, что вы добавлены ng-app несколько раз, как в теле, так и в div. Так что Angular JS выдаст ошибку

Просто добавьте либо body, либо div

<body>

    <div ng-app="myApp" ng-controller="myCtrl">

Или

<body ng-app="myApp">

    <div  ng-controller="myCtrl">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...