AngularJS 动态添加展示数据

来源：互联网发布：凯利指数软件编辑：程序博客网时间：2024/05/17 09:00

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>

可能会遇到的错误

解决方案

在对应的ng-repeat指令中增加track by $index

阅读全文

0 0