AngularJS 没有将对象属性绑定到模板/html 元素答案

【问题标题】：AngularJS not binding object properties to template/html elementAngularJS 没有将对象属性绑定到模板/html 元素
【发布时间】：2018-05-01 18:36:39
【问题描述】：

对 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 元素中的结果：[{"title":"Building Shed","description":"I need help build a shed"},{"title":"Jello","description":"Test 123" }]

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

【问题讨论】：

jobinfo[0].title（它是一个包含对象的数组）
你的重复尝试看起来像<span ng-repeat="job in jobinfo">{{ job.title}}</span> 吗？
@LukeGaskell 是的，正如 Sajeetharan 所说的那样，但我的 ng-repeat 做同样的事情。 <div ng-controller="AddCurrentJobs as jobs"> {{jobinfo[0].title}} <div ng-repeat="job in jobs"> <p>{{job.jobinfo}}</p> </div> </div>
@taki 看起来像我在你下面发表的评论

标签： javascript html angularjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

对不起，我应该提出有关使用 ng-repeat 的问题，但这确实解决了仅在数组中选择特定值的问题。
是的，如果它的数组你应该使用 ng-repeat。标记是否有帮助