2016-04-13 1 views
2

私は、ユーザーがカンマ区切りを入力するときにタグを分割する必要があるケースがあります。ユーザーがタグを1つずつ追加することができる瞬間のために、カンマで区切って入力して複数のタグを入力することは:ユーザーがコンマを入れたときにAngularjs devadeタグ

enter image description here

enter image description here

これは私が何をしたいです:

これは私が今持っているものです

私がこれまで持っている:

    <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'); 
    }; 

答えて

1

コンマをつけてforループを行う。このような

変更 "addInterest" 機能:

$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; 
      } 
     } 
    } 
}; 
0

は、私の知る限り理解し、あなたがこのコードを試してみてください

コンマ

により文字列配列にテキストを分割したい下さい

<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> 
関連する問題