如何绑定角度组件中的任何特定对象属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何绑定角度组件中的任何特定对象属性相关的知识，希望对你有一定的参考价值。
我是角度1.6组件架构的新手，并且有一个简单的问题。我有一个src对象，其中有两个属性，即name和age。现在，我想要的是在html中绑定该name属性。
The following is the code:
test.js： -
$ctrl.src = {
details: [
{ Id: 1, Name: "Test1", Address: "Add1" },
{ Id: 2, Name: "Test2", Address: "Add2" }
]
};
test.html:-
<cell-component>Hi {{Name}}</cell-component>
Expected Output:-
Hi test
答案
由于$scope.src引用具有两个属性的对象，因此角度模型绑定总是需要在视图中指定对象键以及对象名称，如此
{{src.Name}} //renders $scope.src.Name
{{src.Age}} //renders $scope.src.Age
所以你的观点需要改为
<cell-component>Hi {{src.Name}}</cell-component>
还有另一种方法可以访问属性并在视图中呈现它们。
{{src['Name']}} //renders $scope.src.Name
{{src['Age']}} //renders $scope.src.Age
这导致
<cell-component>Hi {{src['Name']}}</cell-component>
另一答案
当您需要访问特定对象的属性时，您应该使用如下的点运算符
<cell-component>Hi {{src.Name}}</cell-component>
编辑
修改详细信息是一个数组，您需要在其中指定要显示的索引
<cell-component>Hi {{src.details[0].Name}}</cell-component>
另一答案
你可以做的一件简单的事情就是你必须在src.details上放置ng-repeat并在其中打印每个对象。即qazxsw poi
另一答案
首先，您必须在作用域上获取src对象，以将其作为表达式进入视图。
'src'是一个具有名为'details'的属性的对象，它本身就是一个对象数组。因此，您必须根据对象层次结构向下移动以获取属性“名称”的值。但'Name'是'details'下的一个属性，它是一个数组，所以你必须使用ng-repeat迭代它或者只是指定数组索引。
<div ng-repeate="obj in src.details"><div>{{obj.Name}}</div>
</div>var app = angular.module('app',[]);
app.controller('ctrl', function($scope){
$scope.src = {
details: [
{ Id: 1, Name: "Test1", Address: "Add1" },
{ Id: 2, Name: "Test2", Address: "Add2" }
]
};
});以上是关于如何绑定角度组件中的任何特定对象属性的主要内容，如果未能解决你的问题，请参考以下文章
如何在 chrome 开发工具中使用监视表达式来监视角度组件中的变量（“this”对象的属性）？