angular input回车事件_angular input响应回车

作者：不正经 | 2024-03-12 07:44:04

踩

angular input响应回车


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/angular.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myctrl">
    <input type="text" ng-model="textmodel" ng-keyup="mykey($event)"/>
    <ul>
    <li ng-repeat="x in list1 ">
    {{x}}
</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.controller('myctrl', function ($scope) {
    $scope.list1 = ['1', '2', '3'];
    $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.textmodel)){//不重复添加
            $scope.list1.push($scope.textmodel);
        }
    };
})
function arrindex(arr, obj) {//判断是否重复
    var i = arr.length;
    while (i--) {
        if (arr[i] === obj) {
            return true;
        }
    }
    return false;
}
</script>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/223061