如何在角组件中绑定任何杂物对象特性

Question

我是Angular 1.6组件体系结构的新手，并且有一个简单的问题。我有一个 src 对象，其中有两个属性，即name和age。 现在，我想要的是在html中绑定该名称属性。

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是指具有两个属性的对象，角度模型绑定始终需要指定视图中的对象键，以及像对象名称这样的对象

  {{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>

Answer 2

当您需要访问特定对象的属性时，您会使用点运算符，如

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

编辑

带有您的修改详细信息是一个数组，您需要指定要显示的索引

 <cell-component>Hi {{src.details[0].Name}}</cell-component>

Answer 3

您可以做的一件简单的事情是，您只需要将ng-repeate放在src.details上并打印在其中即可。IE。 <div ng-repeate="obj in src.details"><div>{{obj.Name}}</div> </div>

Answer 4

首先，您必须将SRC对象带到范围上才能将其视为表达式。

'src'是具有属性命名为"详细信息"的对象，其本身是对象的数组。因此，您必须根据对象层次结构下降，才能获得属性"名称"的价值。但是"名称"是"详细信息"下的属性，这是一个数组，因此您必须使用ng-repeat迭代它或简单地指定数组索引。

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" }
    ]
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    <h3>Hi {{src.details[0].Name}}</h3>
    <h3>Hi {{src.details[1].Name}}</h3>
    
    <h3 ng-repeat="obj in src.details">Hi {{obj.Name}}</h3>
  </div>
</div>