AngularJS没有将对象属性绑定到template / html元素

Question

在观看Todd Motto的付费教程时，angularJS非常陌生，我不知道为什么，但是我的对象属性不会显示在页面上。

function AddCurrentJobs($scope){
$scope.jobinfo = [{
    title: 'Building Shed',
    description: 'I need helping building a shed'
},
{
    title: 'Jello',
    description: 'Test 123'
}];

}

angular
 .module("app")
 .controller("AddCurrentJobs", AddCurrentJobs);

的HTML

<div ng-controller="AddCurrentJobs">
{{jobinfo}}
</div>

div元素中的结果：[{“ title”：“ Building Shed”，“ description”：“我需要帮助搭建棚子”}，{“ title”：“ Jello”，“ description”：“ Test 123”}]

现在，如果将其更改为jobinfo.title，它将在元素中不包含任何内容而返回。 我尝试使用重复指令，但这也不起作用。 控制台中没有错误。 我究竟做错了什么？

Answer 1

您正在尝试访问HTML中类似Array的对象，可以使用其索引访问特定元素，例如，

<div ng-controller="AddCurrentJobs">
  <h1>{{jobinfo[0].title}}</h1>
</div>

Answer 2

要添加到Sajeetharan的答案中，您可以使用ng-repeat来显示作业信息列表中每个对象的数据。 ng-repeat类似于foreach循环，因此语法为“ [列表]中的[对象]”，然后您可以像往常一样访问该对象的属性。

<div ng-controller="AddCurrentJobs">
  <div ng-repeat="job in jobinfo">
    <h1>{{job.title}}</h1>
  </div>
</div>