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，每個文本列表中只有一個項目

回答

相關問題