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

【问题标题】：ng-repeat show multiple textareas with only one item from list in eachng-repeat 显示多个文本区域，每个文本区域中只有一个列表项
【发布时间】：2016-11-16 17:53:59
【问题描述】：

我试图让一个 textarea 使用 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>

这是我得到的

这就是我想要得到的

【问题讨论】：

我不明白你在做什么。如果您的textarea 中有ng-repeat，您将有多个文本区域，有什么问题？你可以说得更详细点吗？或者甚至提供一个包含所有相关代码的plnkr？

标签： javascript html angularjs textarea

【解决方案1】：

一种方法是在控制器中设置一个函数，该函数返回由换行符连接的数组。

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

然后在 HTML 模板中调用这个

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

【讨论】：

【解决方案2】：

请运行我的 sn-p 来实现你的目标。

 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>

【讨论】：

【解决方案3】：

不幸的是，您不能像那样使用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>

【讨论】：

【解决方案4】：

如果我正确理解了您的问题。您希望在 textarea 中打印您的项目列表。您应该从

更改以下代码

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

到

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

不要尝试创建一个 textarea 然后打印其中的值，而是创建一个 textarea(input) 并将其绑定到包含您的项目列表的模型。

我附上了一个 jsFiddle。

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

【讨论】：