Question

我有一个案例，当用户将逗号分隔时，我需要划分标签，目前用户只能逐个添加标签，我想要做的是允许用户输入多个标签输入用逗号分隔：

这就是我现在所拥有的：

这就是我想要做的事情：

到目前为止：

                    <div class="form-group">
                        <label>Mes centres d'intérêt</label>
                        <div class="input-group" style="margin-bottom: 8px;">
                            <input id="tagInsert" type="text" name="newTag" ng-model="newTag" ng-model-options="{debounce: 100}" typeahead="tag for tag in getTags($viewValue)" class="form-control" typeahead-loading="loadingTags" ng-keydown="addInterestOnEvent($event)" ng-disabled="interestLimit" autocomplete="off">
                            <span class="input-group-btn"><span class="btn btn-primary" ng-click="addInterest()" analytics-on="click" ng-disabled="interestLimit" analytics-event="Ajout Interet" analytics-category="Profil">Ajouter</span></span>
                        </div>
                        <p class="form__field__error" ng-show="interestLimit">Vous avez atteint la limite de 10 centres d'intérêt.</p>
                        <ul class="tags">
                            <li class="tag" ng-repeat="name in user.interests track by $index">{{ name }} <i class="icon-close" ng-click="removeInterest($index)" analytics-on analytics-event="Supprimer Interet" analytics-category="Profil"></i></li>
                        </ul>
                    </div>

我的控制器：

$scope.getTags = function (name) {
        return $http.get('/api/tags/' + name.replace('/', '')).then(function (result) {
            var tags = result.data;
            for (var i = tags.length; i--; ) {
                var tagName = tags[i].name;
                if ($scope.user.interests.indexOf(tagName) !== -1) tags.splice(i, 1);
                else tags[i] = tagName;
            }
            return tags;
        });
    };

    $scope.removeInterest = function (id) {
        $scope.interestLimit = false;
        $scope.user.interests.splice(id, 1);
    }

    $scope.addInterest = function () {
        if ($scope.interestLimit) return;

        var element = $document[0].getElementById('tagInsert'),
            value   = element.value;
        if (value.length) {
            element.value = '';
            if ($scope.user.interests.indexOf(value) === -1) {
                $scope.user.interests.push(value);
                $scope.interestLimit = $scope.user.interests.length === 10;
            }
        }
    };

    $scope.addInterestOnEvent = function (event) {
        if (event.which !== 13) return;
        event.preventDefault();
        $scope.addInterest();
    };

    $scope.remove = function () {
        $scope.confirmModal = Modal.confirm.delete(function () {
            User.remove(function () {
                submit = true;
                Auth.logout();
                $location.path('/');
            });
        })('votre compte');
    };

Answer 1

您应该使用逗号分割值并执行for循环。

更改＆＃34; addInterest＆＃34;功能如下：

$scope.addInterest = function () {
    if ($scope.interestLimit) return;

    var element = $document[0].getElementById('tagInsert'),
        value   = element.value.split(',');
    if (value.length) {
        element.value = '';
        for (var i = 0; i < value.length; i++) {
            if ($scope.interestLimit) break;
            if ($scope.user.interests.indexOf(value[i]) === -1) {
                $scope.user.interests.push(value[i]);
                $scope.interestLimit = $scope.user.interests.length === 10;
            }
        }
    }
};

Answer 2

据我了解，您希望用逗号

将文本拆分为字符串数组

请试用此代码

<input id='tags' type="text" />
<input type="button" value="Click" onclick="seperateText()" />

    <script>

        function seperateText(){

            var text= document.getElementById("tags").value;
            var tags = text.split(',');
            console.log(text);
            console.log(tags);

        }


    </script>

当用户输入逗号时，Angularjs会删除标记

2 个答案: