AngularJS 动态添加展示数据

最新推荐文章于 2021-05-17 09:32:29 发布

ms_勇往直前

最新推荐文章于 2021-05-17 09:32:29 发布

阅读量2.5k

点赞数

文章标签： angularjs

本文链接：https://blog.csdn.net/mhw828/article/details/78607636

版权

AngularJS 动态添加展示数据

2017/11/10 9:35:17

效果

代码


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style type="text/css">

            table {
                margin: 10px;
            }


        </style>

        <script type="text/javascript" src="js/angular.min.js"></script>

        <script type="text/javascript">

            var app = angular.module("MS", []);

            app.controller("mscontroller", ["$scope", function ($scope) {

                //数据源
                $scope.datas = new Array();

                /**
                 *  往数组里面添加数据
                 */
                $scope.savedata = function () {

                    $scope.datas.unshift($scope.newsdata);
                    $scope.newsdata = "";
                }

            }])


        </script>

    </head>
    <body ng-app="MS" ng-controller="mscontroller">
    <div>
        <form ng-submit="savedata()">
            <fieldset>
                <legend>添加</legend>
                <label>请输入:</label>
                <input type="text" ng-model="newsdata"/>
            </fieldset>
        </form>

        <table border="1px">
            <!-- item in datas 会遇到错误 Error: [ngRepeat:dupes]-->

            <!-- Error: [ngRepeat:dupes] 如果遍历的数组中包含相同的项，则会抛错 -->

            <!-- 解决方案在对应的ng-repeat指令中增加track by $index -->
            <tr ng-repeat="item in datas track by $index">

                <td>{{item}}</td>

            </tr>

        </table>
    </div>

    </body>
    </html>