将属性值传递给 angularjs 中的 ng-repeat

Question

我按以下方式设置了一个名为 ogPostList 的指令：

angular.module('myApp')
   .directive('ogPostList', function() {
   return {
      restrict: 'E',
      scope: {
        page: '@'
      },
      templateUrl: '../scripts/directives/postList.html'
    };
 });

模板网址：

<input type="text" ng-model="searchText" placeholder="Search" class="postListSearch" />
<table id="post_list_table" ng-controller="PostListController">        
    <tbody>
        <tr ng-repeat="postItem in {{page}} | orderBy:'toString()' | orderBy:'date':true | filter:searchText">
          <td><img title="{{'Post source ' + postItem.source}}" src="{{'images/' + postItem.source + '.svg'}}" height="20"/></td>
          <td>{{postItem.post}}</td>
          <td width="70">{{postItem.date}}</td>
        </tr>
    </tbody>
</table>

控制器设置如下：

angular.module('myApp')
    .controller('PostListController', function($scope, $http) {

        var postsList = [];
        var postsListSummary = [];
        var postsListMain = [];

        $http.get('dummy_content.json')
          .then(function(res){
          postsList = res.data;

          for (var iSummary = 0; iSummary < 10;iSummary++) {
              postsListSummary[iSummary] = postsList[iSummary];
           }

          for (var iMain = 0; iMain < postsList.length;iMain++) {
             postsListMain[iMain] = postsList[iMain];
          }

       });

       $scope.postsSummary = postsListSummary;
       $scope.postsMain = postsListMain;

     });

我想要做的是当我声明一个 og-post-list 元素时通过我的页面属性传递一个值。

<og-post-list page="postsSummary"></og-post-list>

这个值 {{page}} 然后应该转到我的 templateURL 中的 ng-repeat 部分，然后拉出控制器中显示的适当数组以填充我的表

<tr ng-repeat="postItem in {{page}} | orderBy:'toString()' | orderBy:'date':true | filter:searchText">

但是我看到这是不允许的？这是为什么以及告诉我的指令显示两个数组之一的更好方法。 2 个数组之间的唯一区别是第一个数组仅包含 10 个项目，而数组 2 包含从我的 json 文件

中提取的所有元素

Answer 1

在执行ng-repeat的编译函数之前，可以使用编译函数修改模板。

例如：

app.directive('ogPostList', function() {
  return {
    restrict: 'E',
    templateUrl: 'postList.html',
    compile: function compile(tElement, tAttrs) {

      tElement.html(tElement.html().replace('{{page}}', tAttrs.page));

      return {
        pre: function preLink(scope, iElement, iAttrs) {},
        post: function postLink(scope, iElement, iAttrs) {}
      };
    },
  };
});

演示： http://plnkr.co/edit/whwwHTZfMvlABlfkhjKK?p=preview

另一种解决方案是使用第三个变量，例如 postsDisplay 并在 ng-repeat 中使用它。然后您可以将 postsDisplay 设置为 postsSummary 或 postsMain 并在它们之间切换。

将属性值传递给 angularjs 中的 ng-repeat

Pass attribute value into ng-repeat in angularjs

angularjs

angularjs-ng-repeat