Angularjs textarea ng-model 对象属性每一行答案

【问题标题】：Angularjs textarea ng-model object property each lineAngularjs textarea ng-model 对象属性每一行
【发布时间】：2017-04-13 23:09:04
【问题描述】：

我正在使用 angularjs，我正在寻找在 textarea 中的每一行和对象数组中的特定属性之间使用 textarea 和 ng-model 两种方式绑定的解决方案。

例如：

数组将如下所示：

array = [{
    index: 1,
    value: "text line 1"
}, {
    index: 2,
    value: "text line 2"
}, {
    index: 3,
    value: "text line 3"
}]

文本区域看起来像：

text line 1
text line 2
text line 3

谢谢

【问题讨论】：

标签： angularjs textarea angular-ngmodel angularjs-ng-model bindinglist

【解决方案1】：

您可以使用单独的输入而不是文本区域吗？

<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');
    });
});

你也可以使用过滤器代替观察者，但我认为这会让你开始。

从控制器中的数据库中检索数据时，您可以将 myText 重新格式化为字符串，如下所示：

$scope.myText = db_array.map(function(obj){
    return obj.value;
});

这将创建一个数组： ['text line 1', 'text line 2', 'text line 3']

然后使用 join 转换成你希望它在 textarea 中的样子：

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

【讨论】：

谢谢，关于第一个选项，我知道这是一个选项。第二个选项有点问题，因为当我从数据库中获取对象时，它会以对象数组的形式出现，我需要在屏幕上显示它并允许更新它。
你能用array.map吗？您可以将检索到的数据重新格式化为字符串。
我编辑了我的答案以按照您的想法行事。老实说，这比您真正需要的简单文本区域复杂得多。为什么不能将数据库中的所有行存储为单个字符串？

【解决方案2】：

你可以尝试这样简单的事情，除非你更喜欢创建指令

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>

【讨论】：