Question

我是angularjs的新手。我正在尝试创建待办事项列表应用。我面临的问题是当我将数据推送到对象时，数据显示在控制台中而不是网页中。我也使用了materialize 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>

这是我的javascript代码。

angular.module（＆＃39;经理＆＃39;，[]）

        .controller('tasks', function($scope) {

            $scope.lists = [
            ]

            $scope.name = '';


            $scope.enter = function() {
                console.log('hello world');
                $scope.lists.push($scope.name);
                console.log($scope.name);
                $scope.name = '';
            }

        })

Answer 1

好吧，在我看来，你首先对HTML有很多不清楚的知识，而对第二位的是Angular。

我发现了一些错误：你有一个带

的表格

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

<ul>
  <li ng-repeat="listItem in lists">{{ listItem }}</li>
</ul>

总的来说，我真的建议你研究一下像这样的例子，以便更加熟悉角度应该如何工作：

这也是一个关于你想要实现的目标的非常好的教程： https://www.youtube.com/watch?v=1STpbC44bRA

希望它有所帮助。

当以角度推入时，li标签不能看到数组数据

1 个答案: