用回车键向无序列表添加不重复的数据

yedaiyang

于 2017-12-09 09:52:50 发布

阅读量178

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yedaiyang/article/details/78757288

本文介绍了一个使用AngularJS实现的简单应用案例，该案例通过监听输入框中的键盘事件来动态更新列表内容，并且具备防止重复添加的功能。文章详细展示了如何使用AngularJS模块、控制器以及自定义函数来完成这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input type="text" ng-model="shuru" ng-keyup="mykey($event)"/>
<ul>
  <li ng-repeat="x in list1">{{x}}</li>
</ul>
<script>
  var mo = angular.module("myApp",[]);
  mo.controller("myCtrl",function($scope){
   //先定义几个数组的内容
   $scope.list1 = ["1","11","111"];
   $scope.mykey = function(e){
    //获取回车编码
    var keycode = window.event?e.keyCode:e.which;
    if(keycode==13){
     $scope.myClick();//如果等于回车编码执行方法
    }
   };
  $scope.myClick = function(){
   //不重复添加
   if(!arrindex($scope.list1,$scope.shuru)){
    $scope.list1.push($scope.shuru);
   }
  };
  });
  function arrindex(arr,obj){
   //判断是否重复
   var i = arr.length;
   while(i--){
    if(arr[i]===obj){
     alert("重复了");
     return true;
    }
   }
   return false;
  }
</script>