循环对象,根据位置输出不同的html

loop object, output different html depending on position

本文关键字:html 输出 位置 对象 循环      更新时间:2023-09-26

我想用X个项循环一个JSON对象,然后显示这些项-但是,它必须根据它在循环中的位置输出不同的html。例如:第1条与第2-3-4条有不同的布局-第5-6-7条与其他条的布局不同,我该如何使用angular来实现这一点,是否可以使用指令,或者我需要其他东西?如果是,我该怎么做?到目前为止,我已经知道了:

DIS.dbuApp.controller('newsController', ['$scope', '$http', function($scope, $http) { 
    //URL for retrieving JSON object
    $scope.url = 'http://jsonplaceholder.typicode.com/posts';
    $scope.items = [];
    $scope.fetchContent = function() {
        $http.get($scope.url)
        .success(function(data, status){
            if(typeof(data === "object") && data.length > 0) {
                console.log("test");
                //We got the data, and it is and object
                $scope.items = data;
                //Now set variable to tru
                $scope.showresult = true;
                //If first item use this directive:
                _.each($scope.items, function(value, index){
                    //console.log(index);
                    if(index === 0) {
                        //When position 0, render a directive with some specific html
                        console.log(index);
                    } else if(index > 0  && index < 5) {
                        //When position greater than 0 and lower than 5, render another directive with some specific html
                        console.log(index);
                    } else if(index > 4 && index < 9) {
                        //Same as above, but with different html
                        console.log(index);
                    } else if(index > 8 && index < 12) {
                        //Same as above, but with different html
                        console.log(index);
                    }
                    _.each(value, function(value, key){
                        //console.log(value + key); // 0: foo, 1: bar, 2: baz
                    });
                });

                //If second to fifth item, use this directive

                //If six to 10, use this directive
            }   
        })
        .error(function() {
            console.log("There was an error, contact the developer, or check your internet connection" + status);
        });
    };
    $scope.fetchContent();
}]);

如果每个数据类型的数量有限,比如3-5,并且它们之间需要非常不同的功能,而不仅仅是不同的布局,则可以为它们使用一个指令。在这种情况下,您可以使用ng开关:

<div ng-switch="$index">
   <div ng-switch-when="1" number1directive />

或者,您可以有一个单独的指令,并在链接函数中确定要呈现的模板,将索引作为独立的范围传递给它。

<div ng-repeat="item in items">
  <div mydirective item-index="$index" item-data="item" />
</div>

如果它们在功能上非常相似,使用不同的模板,那么最后一个选项将更加干净和可扩展。

更新:

内部使用nginclude的指令示例。

app.directive("dynamicTemplate", function () {
  return {
    template: '<ng-include src="getTemplateUrl()" />',
    scope: {
      index: '@',
      item: '='
    },
    restrict: 'E',
    controller: function ($scope) {
      // function used on the ng-include to resolve the template
      $scope.getTemplateUrl = function () {
        if ($scope.index === 0) {
          return "template0.html";
        } else if ($scope.index > 0 && $scope.index < 5) {
          return "template1-4.html";
        } else if ($scope.index > 4 && $scope.index < 9) {
          return "template5-8.html";
        } else if ($scope.index > 8 && $scope.index < 12) {
          return "template9-11.html";
        }
      }
    }
  }
});

HTML中实现为:

<dynamic-template index="$index" item="item"><dynamic-template>

无论如何,这就是我们的想法。希望您能够使用这种方法,也许需要一些小的改进。