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

时间:2018-05-01 18:36:40

标签: javascript html angularjs

angularJS相当新,看Todd Motto的付费教程,我不知道为什么,但我的对象属性不会出现在页面上。

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元素的结果:[{&#34; title&#34;:&#34; Building Shed&#34;,&#34; description&#34;:&#34;我需要帮助建造棚屋和#34 ;},{&#34; title&#34;:&#34; Jello&#34;,&#34; description&#34;:&#34; Test 123&#34;}]

现在如果将其更改为jobinfo.title,它将返回元素中没有任何内容。 我尝试使用repeat指令,但这也不起作用。 控制台中没有错误。 我做错了什么?

2 个答案:

答案 0 :(得分:0)

您正在尝试以HTML格式访问数组对象,您可以使用索引

访问特定元素
<div ng-controller="AddCurrentJobs">
  <h1>{{jobinfo[0].title}}</h1>
</div>

答案 1 :(得分:0)

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

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