Question

我想用X项循环一个JSON对象，然后显示项目 - 但是，它必须根据循环中的哪个位置输出不同的html。例如：Article1的布局与Article2-3-4不同 - 第5-6-7条的布局与其他布局不同，我如何用棱角分明，是否可以使用指令或者我还需要其他东西？如果是这样，我该怎么做？到目前为止我已经有了这个：

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();

}]);

Answer 1

如果您拥有有限数量的数据类型（例如3-5），则可以对每种数据类型使用指令，并且它们之间需要非常不同的功能 - 而不仅仅是不同的布局。在这种情况下，您可以使用ng-switch：

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

无论如何，这是个主意。希望您能够使用这种方法，或许进行一些细微的改进。

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

1 个答案: