Question

这是我第一次在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>

Answer 1

问题是您在body和div中多次添加了 ng-app 。所以Angular JS会抛出错误

只需在body或div中添加

<body>

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

或

<body ng-app="myApp">

    <div  ng-controller="myCtrl">

Answer 2

您的代码似乎很好并且可以正常运行here。我已经为您的代码创建了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>

在NavBar AngularJs中显示表单OnClick

2 个答案: