Question

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

例如：

数组看起来像：

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

感谢

Answer 1

您可以使用单独的输入而不是textarea吗？

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

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

从控制器中的db中检索数据时，可以将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');

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

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

2 个答案: