Fatal编程技术网
  • javascript/
  • Javascript 按角度推入时，li标记看不到阵列数据

Javascript 按角度推入时，li标记看不到阵列数据

javascript html angularjs

Javascript 按角度推入时，li标记看不到阵列数据,javascript,html,angularjs,Javascript,Html,Angularjs,我是安格拉斯的新手。我正在尝试创建一个待办事项列表应用程序。我面临的问题是，当我将数据推送到对象时，数据显示在控制台中，而不是网页中。我也在使用物化css框架。这是我的html代码 <head> <title>Shamanager</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel=

我是安格拉斯的新手。我正在尝试创建一个待办事项列表应用程序。我面临的问题是，当我将数据推送到对象时，数据显示在控制台中，而不是网页中。我也在使用物化css框架。这是我的html代码

        <head>
            <title>Shamanager</title>
            <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="bower_components/materialize/bin/materialize.css">
            <link rel="stylesheet" type="text/css" href="./css/style.css">
        </head>

        <body>
            <div class="container" ng-controller="tasks">
                <h3 class="center-align"><i>Hola! Sham</i></h3>

                <form class="row" ng-submit="enter()" novalidate>
                    <div class="col s12">
                        <ul class="collapsible" data-collapsible="accordion">
                            <li>
                                <div class="collapsible-header" ng-repeat="thing in lists">
                                    <i class="material-icons">filter_drama</i> 

                                </div>
                            </li>
                            <li>
                                <div class="collapsible-header">
                                    <input type="text" placeholder="Enter task" class="input-field center-align" ng-model="name" type="submit">
                                </div>
                            </li>
                        </ul>
                    </div>
                </form>
            </div ng-submit="">
            <script src="bower_components/angular/angular.min.js"></script>
            <script src="bower_components/jquery/dist/jquery.min.js"></script>
            <script src="js/app.js"></script>
            <script src="bower_components/materialize/bin/materialize.js"></script>
        </body>

        </html>


        <head>
            <title>Shamanager</title>
            <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="bower_components/materialize/bin/materialize.css">
            <link rel="stylesheet" type="text/css" href="./css/style.css">
        </head>

        <body>
            <div class="container" ng-controller="tasks">
                <h3 class="center-align"><i>Hola! Sham</i></h3>

                <form class="row" ng-submit="enter()" novalidate>
                    <div class="col s12">
                        <ul class="collapsible" data-collapsible="accordion">
                            <li>
                                <div class="collapsible-header" ng-repeat="thing in lists">
                                    <i class="material-icons">filter_drama</i> 

                                </div>
                            </li>
                            <li>
                                <div class="collapsible-header">
                                    <input type="text" placeholder="Enter task" class="input-field center-align" ng-model="name" type="submit">
                                </div>
                            </li>
                        </ul>
                    </div>
                </form>
            </div ng-submit="">
            <script src="bower_components/angular/angular.min.js"></script>
            <script src="bower_components/jquery/dist/jquery.min.js"></script>
            <script src="js/app.js"></script>
            <script src="bower_components/materialize/bin/materialize.js"></script>
        </body>

        </html>
好吧，在我看来，你对HTML有很多不清楚的认识，对Angular有很多不清楚的认识

        <head>
            <title>Shamanager</title>
            <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="bower_components/materialize/bin/materialize.css">
            <link rel="stylesheet" type="text/css" href="./css/style.css">
        </head>

        <body>
            <div class="container" ng-controller="tasks">
                <h3 class="center-align"><i>Hola! Sham</i></h3>

                <form class="row" ng-submit="enter()" novalidate>
                    <div class="col s12">
                        <ul class="collapsible" data-collapsible="accordion">
                            <li>
                                <div class="collapsible-header" ng-repeat="thing in lists">
                                    <i class="material-icons">filter_drama</i> 

                                </div>
                            </li>
                            <li>
                                <div class="collapsible-header">
                                    <input type="text" placeholder="Enter task" class="input-field center-align" ng-model="name" type="submit">
                                </div>
                            </li>
                        </ul>
                    </div>
                </form>
            </div ng-submit="">
            <script src="bower_components/angular/angular.min.js"></script>
            <script src="bower_components/jquery/dist/jquery.min.js"></script>
            <script src="js/app.js"></script>
            <script src="bower_components/materialize/bin/materialize.js"></script>
        </body>

        </html>
我发现了一些错误： 你有一张

        <head>
            <title>Shamanager</title>
            <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="bower_components/materialize/bin/materialize.css">
            <link rel="stylesheet" type="text/css" href="./css/style.css">
        </head>

        <body>
            <div class="container" ng-controller="tasks">
                <h3 class="center-align"><i>Hola! Sham</i></h3>

                <form class="row" ng-submit="enter()" novalidate>
                    <div class="col s12">
                        <ul class="collapsible" data-collapsible="accordion">
                            <li>
                                <div class="collapsible-header" ng-repeat="thing in lists">
                                    <i class="material-icons">filter_drama</i> 

                                </div>
                            </li>
                            <li>
                                <div class="collapsible-header">
                                    <input type="text" placeholder="Enter task" class="input-field center-align" ng-model="name" type="submit">
                                </div>
                            </li>
                        </ul>
                    </div>
                </form>
            </div ng-submit="">
            <script src="bower_components/angular/angular.min.js"></script>
            <script src="bower_components/jquery/dist/jquery.min.js"></script>
            <script src="js/app.js"></script>
            <script src="bower_components/materialize/bin/materialize.js"></script>
        </body>

        </html>
  • 表单上的输入字段有多个类型属性，但只需要
    type=“text”
  • 您在陌生的地方使用ng submit（但在表单上就足够了）
  • 无法在ng repeat over列表中显示数据。您需要使用´{{thing}}}显示项目，例如：
      • 

    • {{listItem}
      •
    首先，你的
    有两个
    类型
    属性。即使我只使用一个属性，它也不起作用。Angular始终需要执行一个操作，以便它知道某些内容已更改，所有内容都需要重新计算。因此，你必须调用
    $scope.$apply（）
    在你将一个项目推到数组中之后，在你的enter方法中。@Teemoh不应该是这样的，因为
    enter
    被
    ngSubmit
    调用，这将触发一个摘要。你的代码工作正常。只需在某个地方使用
    {{thing}
    。谢谢。你的回答帮了我很大的忙