Question

我是前端新手。每当用户在文本区域中键入％时，我都需要显示值列表。从列表中，所选值必须附加在文本框中。

例如：

嗨％名字你好吗？

在上面的字符串中，名称是列表值之一。附加值后，它可以允许用户键入普通文本。

Answer 1

以下是您正在寻找的解决方案。请忽略css

<html ng-app="exampleApp">

<head>
    <meta charset="utf-8">
    <title>ng app</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" type="text/javascript"></script>
    <script>
        var myApp = angular.module('exampleApp', []);

        myApp.controller('myCtrl', function($scope) {

            $scope.actualData = [
                'John',
                'Dan',
                'Brown'
            ];

            $scope.viewList = function() {

                var templist = []

                if ($scope.val == '' || $scope.val == undefined) {
                    templist = [];
                } else if ($scope.val.indexOf('%') > -1) {
                    templist = $scope.actualData;
                }
                $scope.data = templist;
            }

            $scope.setData = function(value) {
                $scope.val = $scope.val.replace('%','') + " " + value;
                $scope.data = [];
            }



        })
    </script>
</head>

<body ng-controller="myCtrl">
    <input type="search" ng-model="val" ng-change="viewList()" />
    <ul>
        <li ng-repeat="option in data" ng-click="setData(option)">{{option}}</li>
    <ul>

</body>

</html>

检查此plunker链接https://plnkr.co/edit/bz68dKK3izvCs7jcjX4C?p=preview，以查看其实际操作

如何在输入替换字符串时显示文本框中的值列表

1 个答案: