Angularjs Créer textarea avec l'option ajouter la valeur du modèle

Question

J'essaye de créer un textarea de forme où l'utilisateur peut taper le texte et peut choisir quelques modèles prédéfinis.

Ici, je veux permettre à l'utilisateur de taper le textarea et ont également la possibilité de rechercher des modèles prédéfinis de la boîte input au-dessus.

Je peux taper mais lors de l'ajout de valeur à partir du modèle, il n'est pas ajouté à `textarea.

Dans la zone input, j'ai une fonction onChange pour ajouter le modèle sélectionné au ng-model de textarea.

L'utilisateur peut taper quelques lignes, puis ajouter des modèles.

Les modèles sont juste quelques chaînes qui ont été ajoutées par l'utilisateur précédemment.

Exemple de gabarit: "C'est un endroit merveilleux."

<input id="catg" type="text" placeholder="Enter Text/Select Template" ng-model="newData" class="form-control" uib-typeahead="template as template.content for template in getTemplate($viewValue) | limitTo:8" typeahead-on-select="onSelect($item)" typeahead-min-length="1" typeahead-no-results="noResults"> 

<textarea ng-model="userValue"></textarea> 

js:

$scope.onSelect = function(data) { 
    $scope.userValue.concat(data) 
} 

Answer 1

Vous pouvez regarder toutes les variations de la valeur ng-modèle pour la zone de texte et mettre à jour le textarea accorddingly

var app = angular.module('myApp', []); 
 

 
app.controller('MainCtrl', ['$scope', function ($scope) { 
 
    $scope.txt=''; 
 
    
 
    $scope.reset = function() { 
 
     $scope.txt = ''; 
 
    }; 
 
    $scope.$watch('template.text',function(oldval,newval){ 
 
     if(newval!==undefined) 
 
     $scope.txt= newval + "\n"; 
 
    
 
    }) 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MainCtrl"> 
 
<input style="float:left;" type="text" ng-model="template.text"> 
 
<textarea id="textarea" ng-model="txt" style="float:left;"> 
 
    
 
</textarea> 
 

 
    <div>{{txt}}</div> 
 

 
<!--<button id='btn' ng-click="txt=''">Reset textarea</button>--> 
 
    <button id='btn' ng-click="reset()">Reset textarea</button> 
 
</div>

Answer 2

Votre modèle pour le champ de saisie est newData. Par conséquent, passez cette valeur dans la fonction onSelect().

<input id="catg" type="text" placeholder="Enter Text/Select Template" ng-model="newData" class="form-control" uib-typeahead="template as template.content for template in getTemplate($viewValue) | limitTo:8" typeahead-on-select="onSelect(newData)" typeahead-min-length="1" typeahead-no-results="noResults"> 

<textarea ng-model="userValue"></textarea>