ng-repeat 显示多个文本区域，每个文本区域只有列表中的一项

Question

我正在尝试让一个文本区域使用 ng-repeat 打印出一个列表。相反，我有几个文本区域，每个文本区域在列表中都有一个项目。我明白为什么它不起作用，但无法弄清楚要更改什么才能获得我想要的结果。这是我的代码

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

这是我得到的

这就是我想要得到的

Answer 1

不幸的是，您不能那样使用 ng-repeat，因为它会创建您添加它的元素的实例。但是，您可以通过使用过滤器来实现您的目标：

.filter("displayFilter", function(){
    return function(items){
        var result = '';
        angular.forEach(items, function(item, index){
            result += item;
            // only add a newline if we have more items to add
            if(index !== items.length - 1){
                result += '\n';
            }
        });
        return result;
    }
})

然后在您的文本区域中使用该过滤器：

<textarea>{{elements | displayFilter}}</textarea>

Answer 2

如果我没有正确理解你的问题。您希望将项目列表打印在文本区域中。您应该从

更改以下代码

<textarea ng-repeat="elements in list">{{elements}}</textarea>

到

<input type="text" ng-model="list" ng-disabled="true"></input>

不要尝试创建文本区域然后打印其中的值，而是创建文本区域（输入）并将其绑定到包含项目列表的模型。

我附上了一个jsFiddle。

http://jsfiddle.net/Lvc0u55v/6827/

Answer 3

一种方法是在控制器中有一个函数，returns 数组由换行符连接。

$scope.textAreaValues = function(){
  return $scope.list.join('\n');
}

然后在 HTML 模板中调用它

<textarea>{{ textAreaValues() }}</textarea>

Answer 4

请运行我的代码片段来实现你的目标。

 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>

ng-repeat 显示多个文本区域，每个文本区域只有列表中的一项

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

html

javascript

textarea

angularjs