ng-repeat太强大,需要愚蠢

时间:2013-05-12 14:51:53

标签: angularjs textarea angularjs-ng-repeat

新手在这里试图解决这个问题。

我有一个对象文字,我想要过滤掉并显示在textarea中。

这个小提琴展示了我想要实现的目标 http://jsfiddle.net/DrmVC/3/

<div ng-app="">
<div ng-init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
I have {{friends.length}} friends. They are:
<ul>
 <li ng-repeat="friend in friends">
    [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
  </li>
</ul>
  <textarea> [1] John who is 25 years old.
[2] Mary who is 28 years old. </textarea>

</div>
</div>

Ng-repeat对textareas不起作用。根据我有限的理解,每次重复时,ng-repeat都会实例化新范围,而textarea只是想要显示一些字符串 - 我怎样才能得到这个字符串?

也许是angularForeach过滤对象文字的一个工作示例(如ng-repeat确实)并输出到字符串我可以绑定到类似{{foreachStringOutput}}

提前致谢。

1 个答案:

答案 0 :(得分:1)

我认为你想要做的是创建一个函数来生成你想要的文本并将其绑定到你的文本区域。在下面的示例中,friendText()循环遍历数组并生成文本。

以下是快速演示:http://plnkr.co/edit/fmiSg3uJChy00bgffe9I?p=preview

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

app.controller('MainCtrl', function($scope) {

  $scope.friends = [{name:'John', age:25}, {name:'Mary', age:28}];

  $scope.friendText = function() {
    var text ='';
    angular.forEach($scope.friends, function(value, key){
     text = text + '[' + (key+1) + '] ' + value.name + ' is ' + value.age + ' years old.'
    });

    return text;

  }

});

和标记(ng-app在html区域定义,在此处不在此处,但在演示链接上)

<body ng-controller="MainCtrl">

  <div>
    I have {{friends.length}} friends. They are:
    <ul>
      <li ng-repeat="friend in friends">
        [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
      </li>
    </ul>
      <textarea> {{friendText()}}</textarea>

</div>
</body>