Question

这是我第一次尝试用angular构建一些东西，我发现自己无法检索到一些JSON数据。

数据以JSON格式从SQL数据库中检索，然后通过角度路径传递给模板：

.when('/tasks/:TaskID',{
    templateUrl: 'template/task_data_template.html',
    controller:"showTaskData",
    controllerAs: 'STD'
})

showTaskData定义如下：

angular.module('moonDive').controller('showTaskData',function($http,$routeParams){

var store = this; 

store.tasks= [];

json_Url = 'api/tasks_data.php?TaskID=' + $routeParams.TaskID;


$http.get(json_Url).success(function(data){
    store.tasks = data; 
})});

我的数据有这样的结构： Data Structure

可以通过模板html访问：

{{STD.tasks[1]}}

返回该数据＆＃34; JSON＆＃34;方式：

{
    "ActionID": "1",
    "Taskref": "1",
    "Ast1_1": "",
    "Ast2_1": "Start EVA watch\nopen           hatch\nAssist CDR",
    "Ast3_1": "",
    "Ast1_2": "Egress cabin to LM porch\nReceive &      jetttison bag\nReceive ETB/LEC",
    "Ast2_2": "Deploy CDR PLSS antenna\nHand jettison      bag to CDR\nHand ETB/LEC to CDR",
    "Ast3_2": "",
    "Ast1_3": "Descend lander to top rung\nUnlock and deploy MESA\nLower ETB on LEC",
    "Ast2_3": "Tape recorder -off\nVerify voice signals level and uitlity floo [......]"
}

到目前为止一切顺利，所以我的最终目的是为X任务创建一个包含两列（ast1，ast2）和X行的表。我不确定如何开始，但我尝试过这样的事情：

<table class="bordered hoverable responsive-table">
<tbody>

<tr ng-repeat="boo in STD.tasks[1]">
<td style=" color: blue;" ng-if="$odd"> {{boo}}</td>
<td style="color:red" ng-if="$even"> {{boo}}</td>
</tr>
</tbody>
</table>

没有运气它根本不起作用，但是一个让我理解发生了什么的奇怪之处在于它显示了所有信息，但似乎是一个随机的顺序。 / p>

enter image description here

我想用＆＃34; 1＆＃34;删除行;通常我会做一个ng-if =＆＃34; boo.NameOfTheRow＆＃34; ;但在这里，我真的无法访问这个名字吗？

所以我的问题是：如何删除不必要的数据？如何通过Astr1和2（对于列）和任务1到X（对于行）排列数据

非常感谢！

PS：生成的代码应如下所示：

<table>

<thead>
    <td> task </td>
    <td> Astr 1 </td>
    <td> Astr 2 </td>
    <td> Astr 3 </td>
</thead>

<tbody> 
<tr>
    <td> 1</td>
    <td> {{STD.tasks[1].Ast1_1}} </td>
    <td> {{STD.tasks[1].Ast2_1}}</td>
    <td>{{STD.tasks[1].Ast3_1}}   </td>
</tr>
<tr>
    <td> 2</td>
    <td> {{STD.tasks[1].Ast1_2}} </td>
    <td> {{STD.tasks[1].Ast2_2}}</td>
    <td>{{STD.tasks[1].Ast3_2}}   </td>
</tr>

<tr>
    <td> 3</td>
    <td> {{STD.tasks[1].Ast1_3}} </td>
    <td> {{STD.tasks[1].Ast2_3}}</td>
    <td>{{STD.tasks[1].Ast3_3}}   </td>
</tr>

....
<tr>
    <td> 7</td>
    <td> {{STD.tasks[1].Ast1_7}} </td>
    <td> {{STD.tasks[1].Ast2_7}}</td>
    <td>{{STD.tasks[1].Ast3_7}}   </td>
</tr>


    </tbody></table>

因此数据应显示为： enter image description here

Answer 1

如果您的STD.tasks是一系列条目，那么您只需将ng-repeat更改为ng-repeat="boo in STD.tasks"。

您应该以数组形式获取JSON数据：

[
  {"field":"value", "field2": "value"},
  {"field":"value", "field2": "value"},
  {"field":"value", "field2": "value"},
  ...
]

ng-repeat将要遍历数组中的每个值。现在，您已将其指向数组中的第一个项目，因此它会重复对象中的每个属性。

Angular.JS子阵列访问[＆amp;解析密钥]

1 个答案: