javascript - 如何在 Angular 组件中绑定(bind)任何特定的对象属性

Question

我是 Angular 1.6 组件架构的新手，遇到了一个简单的问题。我有一个 src 对象，其中有两个属性，即 name 和 age。 现在，我想要的是在 html 中绑定(bind)该名称属性。

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

Answer 1

由于 $scope.src 指的是一个有两个属性的对象，angular model binding 总是需要像这样指定 View 中的对象键和对象名

  {{src.Name}} //renders $scope.src.Name
  {{src.Age}} //renders $scope.src.Age

所以你的view需要改成

<cell-component>Hi {{src.Name}}</cell-component>

还有另一种方法可以访问属性并将它们呈现在 View 中。

  {{src['Name']}} //renders $scope.src.Name
  {{src['Age']}} //renders $scope.src.Age

导致

 <cell-component>Hi {{src['Name']}}</cell-component>