HBuilder ng-的编程回车输入下方显示不重复

最新推荐文章于 2021-01-14 12:35:33 发布

wuhaowu

最新推荐文章于 2021-01-14 12:35:33 发布

阅读量494

点赞数

本文链接：https://blog.csdn.net/qq_40072304/article/details/78513545

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>日考题目</title>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
   </head>
   
   <body ng-app="myApp" ng-controller="myCtrl">

       <input type="text" ng-keydown="add($event)" ng-model="name"/>
       <ul>
           <li ng-repeat="x in names">{{x}}</li>
       </ul>
       <script type="text/javascript">
           var m = angular.module("myApp",[]);
           m.controller("myCtrl",function($scope){
               $scope.names = ["张三","李思思"];
               //逻辑
               $scope.add = function($event){

                   //判断是否是回车
                   var newNames =[];
                   var code = $event.keyCode;
                   if (code==13) {
                       console.log("回车");
                       //将输入框里面的值，加入数组
                       var n = $scope.name;
                       //判断数组里面是否已经含有输入值了
                       //遍历
                       for(var i =0;i<$scope.names.length;i++){

                           var n1 = $scope.names[i];
                           if (n1==n) {
                               alert("已经存在");
                               return;
                           }
                       }
                       $scope.names.unshift(n);
                   }

               }


           });
       </script>


   </body>
</html>