您的位置：首页 > 产品设计 > UI/UE

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

2017-11-12 18:25 92 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航