Question

我有这种数据

$scope.data = [{
  "production_list": [
    {"product": "google\n"},
    {"product": "stackoverflow\n"},
    {"product": "angular\n"}
   ]
}]

如何在textarea中显示它？

<textarea>
  google
  stackoverflow
  angular
</textarea>

我尝试的是

<tr ng-repeat="list in data">
  <td>
    <textarea ng-repeat="x in data.production_list">
       {{x.product}}
    </textarea>
  </td>
</tr>

输出

<textarea>
  google
</textarea>
<textarea>
  stackoverflow
</textarea>
<textarea>
  angular
</textarea>

这是否有可能增加？因为而不是ng-repeat更好地使它像这样

<textarea value="data.production_list[$index].product">
</textarea>

然而$ index无效，其值为0

Answer 1

您可以使用过滤器，而不是将其写为范围函数，以便您可以轻松地跨模块重复使用代码。

＆＃13;

var app = angular.module('myApp', []);
app.filter('joinAttrs', function() {
    return function(list, attrName) {
        var joinedStr = "";
        for(var i=0; i<list.length; i++){
          joinedStr += list[i][attrName];
        }
        return joinedStr;
    };
});
app.controller('DemoCtrl', function($scope) {
    $scope.data = [{
      "production_list": [
        {"product": "google\n"},
        {"product": "stackoverflow\n"},
        {"product": "angular\n"}
       ]
    }]
});

＆＃13;

textarea {
  height: 100px;
  width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="DemoCtrl">
  <div ng-repeat="list in data">
    <textarea>{{list.production_list | joinAttrs:'product'}}</textarea>
  </div>
</div>

＆＃13;

Answer 2

您可以先创建一个连接数组数据的函数，然后将其用作ng-model。

在您的控制器中：

 $scope.textareaData = data[0].production_list
  .map(function(item) {
    return item.product;
  })
  .join('');

然后你的textarea将是：

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

这将输出textarea内的每个产品。

Answer 3

在控制器中创建一个函数，并在文本区域中使用它，如

＆＃13;

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $timeout) {
$scope.data = [{
  "production_list": [
    {"product": "google\n"},
    {"product": "stackoverflow\n"},
    {"product": "angular\n"}
   ]
}]
$scope.textAreaValues = function(data){
  var retVal=  data.reduce(function(a,b){
  return {product: a.product + b.product};
  });
  return retVal.product;
}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr ng-repeat="list in data">
  <td>
    <textarea>
     {{textAreaValues(list.production_list)}}
    </textarea>
  </td>
</tr>
</table>
</div>

＆＃13;

数组内的AngularJs数组显示在textarea

3 个答案: