循环对象,根据位置输出不同的html
loop object, output different html depending on position
我想用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>
无论如何,这就是我们的想法。希望您能够使用这种方法,也许需要一些小的改进。
相关文章:
- 用Koa打印漂亮的HTML输出
- 如何在文本框中显示内部 HTML 输出
- 使用 HTML 输出标记查看可缩放图像并分配 src
- 有没有办法在使用 html 输出标签时控制图像的大小
- 我可以't从draft js中获取html输出
- 在使用append()后,美化html输出
- 使用Gulp Usemin将JS和HTML输出到不同的位置
- 使用外部JS文件对Servlet进行更改'的HTML输出
- 如何通过javascript更改html输出
- 你如何为 HTML 输出编写测试用例
- 奇怪的 HTML 输出
- AngularJS:将HTML输出写入文本文件
- 不知道如何使用 ajax 将 html 输出到页面上
- 在文本区域而不是 HTML 代码中显示 HTML 输出
- 请求 JSONP 时的文本/html 输出
- 表单提交时的 HTML 输出更新
- 余烬.js HTML 输出损坏
- 谷歌网络应用程序加载脚本不适用于HTML输出
- 使用 JavaScript 对 HTML 输出 (ASP.Net) 所做的更改立即撤消
- HTML-输出文本的元素