ng-repeat各リスト内の1つの項目のみを含む複数のテキストエリアを表示

-2

ng-repeatを使用してテキストエリアを作成しようとしています。代わりに、私はリストにそれぞれ1つの項目を持ついくつかのテキストエリアを持っています。私はそれがなぜ機能していないのか理解していますが、私が望む結果を得るために何を変えるべきかを理解することはできません。ここに私のコードng-repeat各リスト内の1つの項目のみを含む複数のテキストエリアを表示

<!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>{{elements | displayFilter}}</textarea>

出典

2016-07-14 01:22:08 Lex

-1

私が正しくあなたの質問を理解していた場合しかし、あなたは、フィルタを使用して、後にしているものを達成することができます。あなたは、あなたのリストをテキストエリアに印刷したいと思っています。あなたは

に

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

から次のコードを変更する必要があり

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

その後、テキストエリアを作成し、その中に値を印刷し、むしろ、テキストエリア（入力）を作成し、それをバインドしようとしないでくださいあなたの商品リストを含むモデルに追加します。

私は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各リスト内の1つの項目のみを含む複数のテキストエリアを表示

答えて

関連する問題