angularjs - Angularjs textarea ng模型对象属性每一行

  显示原文与译文双语对照的内容

我正在使用 arraylist,我正在寻找使用of和 ng-model 两条路线在对象 array 中的特定属性的解决方案。

例如:

array 将如下所示:


array = [{


 index: 1,


 value:"text line 1"


}, {


 index: 2,


 value:"text line 2"


}, {


 index: 3,


 value:"text line 3"


}]



textarea的外观如下:


text line 1


text line 2


text line 3



致谢

时间: 原作者:

你可以使用单独的输入而不是使用?


<input ng-model="line-1">


<input ng-model="line-2">


<input ng-model="line-3">



{{line-1}}


{{line-2}}


{{line-3}}



否则,你将需要根据返回字符拆分文本。


<textarea ng-model="myText"></textarea>


<div ng-repeat="line in lines">


 {{line}}


</div>



并为控制器中的更改添加监视程序:


angular.module('myapp').controller('myController', function($scope){


 $scope.lines = [];


 $scope.$watch('myText', function(newValue, oldValue){


 $scope.lines = newValue.split('n');


 });


});



你也可以使用过滤器而不是监视器,但我认为这会让你开始。

从控制器中检索数据时,可以将共线性重新格式化为如下所示的字符串:


$scope.myText = db_array.map(function(obj){


 return obj.value;


});



这将创建一个 array: ['text line 1', 'text line 2', 'text line 3']

然后使用join转换为你希望它在textarea中的位置:

$scope.myText = $scope.myText.join('n');

除非你想创建一个指令,你可以尝试一些简单的东西


var myApp = angular.module('myApp', []);



myApp.controller('MyController', ['$scope','$timeout', function($scope,$timeout) {


 $scope.array = [{


 index: 1,


 value:"text line 1"


 }, {


 index: 2,


 value:"text line 2"


 }, {


 index: 3,


 value:"text line 3"


 }];



 $scope.getItems = function(){


 var items ="";


 $scope.array.forEach(function(item){


 items+=item.value+"n";


 });


 return items;


 }


 $scope.deleteItem = function(item){


 var index = $scope.array.indexOf(item); 


 $scope.array.splice(index,1);


 };


}]);

textarea{


 width: 50%;


 height: 5em;


 }

<!DOCTYPE html>


<html>



 <head>


 <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>


 <link rel="stylesheet" href="style.css"/>


 <script src="script.js"></script>


 </head>


<body ng-app="myApp">


 <section ng-controller="MyController">


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


 <div ng-repeat="item in array">


 <input type="text" ng-model="item.value">


 </div>


 </section>


</body>


</html>
...