1

假设我正在使用 Angular 进行数据绑定并阻止我使用重复代码：

<div id="{{slide.id}}" class="step" data-x="{{slide.x}}" data-y="{{slide.y}}" data-z="{{slide.z}}" data-rotate-x="{{slide.rotateX}}" data-rotate-y="{{slide.rotateY}}" data-rotate-z="{{slide.rotateY}}" data-scale="{{slide.scale}}" ng-repeat="slide in slides">
  {{slide.content}}
</div>

正如你所看到的，我准备div好让它遍历这个 JSON 文件中的每个对象：

[
{
  "id":"overview",
  "x":3000,
  "y":1500,
  "z":0,
  "rotateX":0,
  "rotateY":0,
  "rotateZ":0,
  "scale":10,
  "content":"content2"
},
{
  "id":"slide_1",
  "x":1600,
  "y":1800,
  "z":-10,
  "rotateX":0,
  "rotateY":0,
  "rotateZ":0,
  "scale":1,
  "content":"content1"
},
]

该文件使用此完美加载：

App = angular.module('App', []);
App.controller('SlideCtrl', ($scope, $http) ->
$http.get('js/slides.json')
     .then((res)->
       $scope.slides = res.data
  )
)

但不知何故，输出看起来像这样：

角度印记输出

有没有人真正实现了角度和印象？

4

1 回答 1

4

我也在研究这个.. 但略有不同.. 我的代码可以 100% 工作。这是我的 HTML 模板

<div ng-controller="agendaController">
   <ul><li ng-repeat="agendaItem in agendaItems" id="agenda-{{agendaItem.id}}" class="step" data-x="{{agendaItem.x}}" data-y="{{agendaItem.y}}" data-scale="{{agendaItem.scale}}">
<q>{{agendaItem.content}}</q></li></ul>
</div>

这是我的javascript

var app = angular.module('app', []);
app.controller('agendaController', function($scope){
$scope.agendaItems = [];
contents = [
    "Various Stages in Construction of a building",
    "Stake-holders & their levels of hierarchy from TCS to Labour",
    "Survey Reports"
];
for (i = 0, n = contents.length, x = -12000, y = -10000, scale = 2; i < n; i++) {
    data = {'id': (i + 1), 'x': x, 'y': y, 'scale': scale, 'content': contents[i]}
    $scope.agendaItems.push(data);
    y += 1000;
}
});
于 2013-10-24T10:37:35.647 回答