ng-repeat显示多个textareas，每个文本列表中只有一个项目

-2

我想要使用ng-repeat打印出一个textarea列表。相反，我有几个textareas列表中的每个项目。我明白为什么它不起作用，但无法弄清楚要改变什么来获得我想要的结果。这里是我的代码ng-repeat显示多个textareas，每个文本列表中只有一个项目

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

这里是我得到

这是什么，我试图让

来源

2016-07-14 Aaron

我不明白你想要做什么。如果你在'textarea'中有'ng-repeat'，你将会有多个文本区域，这有什么问题？你可以说得更详细点吗？甚至可以提供所有**相关**代码的plnkr？ – developer033

调用此请运行我的片段，以实现自己的目标。

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>

来源

2016-07-14 01:50:25

不幸的是你不能使用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：

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

来源

2016-07-14 01:22:08 Lex

-1

如果我正确理解你的问题。您希望您的项目列表在textarea中打印。你应该将下面的代码从

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

改变

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

不要尝试创建一个textarea然后打印它里面的价值，而是创造一个textarea（输入），并将其绑定到包含项目列表的模型。

我附上了一个jsFiddle。

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

来源

2016-07-14 01:23:02 Sim

的一种方法是将有在它返回一个新行接合所述阵列控制器中的功能。

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

然后在HTML模板

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

来源

2016-07-14 01:28:45

ng-repeat显示多个textareas，每个文本列表中只有一个项目

回答

相关问题