Aaron Aaron - 4 months ago 15
AngularJS Question

ng-repeat show multiple textareas with only one item from list in each

I am trying to have a textarea the prints out a list using ng-repeat. Instead I have several textareas with one item each in the list. I understand why it is not working, but cannot figure out what to change to get the result I want. Here is my code

<!DOCTYPE html>
<html lang="en" ng-app = 'app'>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src = 'bower_components/angular/angular.js'>
</script>
<script>
var app = angular.module('app', []);
app.controller('myController', ['$scope', function($scope){
//printController will show the current $scope
$scope.list = []
$scope.submit = function(){
console.log($scope.myModel)
if($scope.myModel){
$scope.list.push(this.myModel);
$scope.myModel = ''
}
}
}]);
</script>
</head>
<body>
<div ng-controller = "myController" id = "myController">
<label>Favorite Food </label>
<input type="text" ng-model = 'myModel'>
<button ng-click="submit()">
<label>Favorite Food:</label>
</button>
<div id ='model' ng-if = "myModel">
<label>Currently Typing: </label>
<span ng-bind='myModel'>
</span>
</div>
<textarea ng-repeat="elements in list">{{elements}}</textarea>

</div>
</body>
</html>


Here is what I am getting
enter image description here

This is what I am trying to get

enter image description here

Answer

Please run my snippet to achieve your goal.

 var app = angular.module('app', []);
  app.controller('myController', ['$scope', function($scope){
    //printController will show the current $scope
    $scope.list = [];
    $scope.submit = function(){
      console.log($scope.myModel)
      if($scope.myModel){
        $scope.list.push($scope.myModel);
        $scope.myModel = '';
      }
    }
    $scope.$watch(
    function(){return $scope.list.join("\n");},
      function(newVal,oldVal){
        $scope.allTexts = newVal;
      }
    
    );
    
  }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
    <div ng-controller = "myController" id = "myController">
      <label>Favorite Food </label>
      <input type="text" ng-model = 'myModel'>
       <button ng-click="submit()">
        <label>Favorite Food:</label>
       </button>
      <div id ='model' ng-if = "myModel">
        <label>Currently Typing: </label>
        <span ng-bind='myModel'>
        </span>  
      </div>
      <textarea ng-model="allTexts"></textarea>

    </div>
</body>

Comments