AngularKullanıcı zaman virgül koyduğunda etiketleri degradede

Question

Kullanıcı bir virgül ayırma koyduğunda etiketleri bölmek zorunda olduğum bir durum var, kullanıcı sadece etiketleri tek tek ekleyebilirsiniz, ne yapmak istediğimi kullanıcı sağlar virgülle ayrılmış girişte birden fazla etiket girmek için:

:

bu yapmak istediğim şudur:

Bu ne var şimdi ise

Ne var bugüne kadar:

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

Benim denetleyicisi:

$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

Değer bölmelisiniz virgülle ve döngü için yap. Böyle

Değiştir "addInterest" fonksiyonu:

$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

Bildiğim kadarıyla anladığım kadarıyla, bu kodu deneyin

virgülle

tarafından dize diziye metni bölmek istediğiniz lütfen

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