1

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

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
4

4 回答 4

2

由于$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>
于 2017-12-28T06:58:13.303 回答
0

首先，您必须将 src 对象放在作用域上，才能将其作为表达式查看。

'src' 是一个具有名为 'details' 的属性的对象，它本身就是一个对象数组。所以你必须根据对象层次结构向下获取属性'Name'的值。但是“名称”是“详细信息”下的一个属性，它是一个数组，因此您必须使用 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>

于 2017-12-28T07:59:57.123 回答
0

当您需要访问特定对象的属性时，您应该使用点运算符，如下所示

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

编辑

与您的修改详细信息是一个数组，您需要在其中指定要显示的索引

 <cell-component>Hi {{src.details[0].Name}}</cell-component>
于 2017-12-28T06:54:01.987 回答
0

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

于 2017-12-28T07:18:17.900 回答