angular在前一个元素添加东西

最新推荐文章于 2021-06-17 06:33:53 发布

原创最新推荐文章于 2021-06-17 06:33:53 发布 · 496 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS实现的简单应用案例，该应用能够通过监听输入框的回车键事件来实现实时向页面列表中添加新条目的功能。具体实现方式为：当用户在输入框中按下回车键时，将当前输入的内容作为一个新的项添加到显示的列表中。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/angular.min.js" charset="UTF-8"></script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <input type="text" ng-model="name" ng-keyup="myKeyup($event)" class="form-control" style="width:60px;" />
       <ul ng-repeat="good in goods">
           <li>{{good.gname}}</li>
       </ul>


   </body>
   <script type="text/javascript">
       var mo = angular.module("myApp",[]);
       mo.controller("myCtrl",function($scope){
           $scope.goods=[];
           $scope.myKeyup=function(e){
               var keycode=window.event?e.keyCode:e.watch();

               if(keycode==13){

                   var good={"gname":$scope.name};
                   $scope.goods.unshift(good);
               }
           }
       })
   </script>
</html>