Javascript 从和ng重复填充卡片

我想知道通过从使用ng repeat的列表中选择一个名称来填充我创建的卡片的最佳方式是什么。例如，ng repeat使用的数组包含如下项：

firstname:'Ryan'，secondname:'Garrett'，age:23

。ng repeat只提取firstname，我希望能够单击该名称并用其他详细信息填充卡片。最好的方法是什么？我创建了一个JSFIDLE来帮助解决方案：。提前谢谢

HTML:

---

您可以将

ng click=“fillCard（x）”

添加到

中，并在范围内创建一个函数，如

$scope.fillCard = function(item) {
  $scope.firstname = item.firstname;
  $scope.secondname = item.secondname;
}

和html格式：

Persons name: {{firstname}}
<br>Secound name: {{secondname}}

人名：{{firstname}

secondname:{{secondname}}

您可以将

ng click=“fillCard（x）”

添加到

中，并在范围内创建一个函数，如

$scope.fillCard = function(item) {
  $scope.firstname = item.firstname;
  $scope.secondname = item.secondname;
}

和html格式：

Persons name: {{firstname}}
<br>Secound name: {{secondname}}

人名：{{firstname}

secondname:{{secondname}}

您可以使用

ng单击

并传递单击的项目

<li ng-repeat="x in items" ng-click="itemClicked(x)">{{x.firstname}}</li>

和在UI模板中

<div>
Persons name: {{selectedItem.firstname}}
<br>Secound name: {{selectedItem.secondname}}
<br>Age: {{selectedItem.age}}
</div>

人员姓名：{{selectedItem.firstname}

Secound名称：{{selectedItem.secondname}

年龄：{{selectedItem.Age}

您可以使用

ng单击

并传递单击的项目

<li ng-repeat="x in items" ng-click="itemClicked(x)">{{x.firstname}}</li>

和在UI模板中

<div>
Persons name: {{selectedItem.firstname}}
<br>Secound name: {{selectedItem.secondname}}
<br>Age: {{selectedItem.age}}
</div>

人员姓名：{{selectedItem.firstname}

Secound名称：{{selectedItem.secondname}

年龄：{{selectedItem.Age}

控制器中可以有一个

selectedItem

属性。 我们来看看,

控制器

$scope.selectedItem;

模板

• ng单击

  选择当前对象
• 将控制器

  选择editem

  绑定到卡

  <h3>People:</h3>
  <br>
  <div ng-app ng-controller="MyCtrl">
  <ul>
      <li ng-repeat="x in items" ng-click='selectedItem = x'>{{x.firstname}}</li>
  </ul>
  </div>
  <br>
  
  <div>
  Persons name: {{selectedItem.firstName}}
  <br>Secound name: {{selectedItem.secondname}}
  <br>Age: {{selectedItem.age}}
  </div>
  

  人：
  
  
  
  {{x.firstname}
  
  
  
  人员姓名：{{selectedItem.firstName}
  
  Secound名称：{{selectedItem.secondname}
  
  年龄：{{selectedItem.Age}
  

---

控制器中可以有一个

selectedItem

属性。 我们来看看,

控制器

$scope.selectedItem;

模板

• ng单击

  选择当前对象
• 将控制器

  选择editem

  绑定到卡

  <h3>People:</h3>
  <br>
  <div ng-app ng-controller="MyCtrl">
  <ul>
      <li ng-repeat="x in items" ng-click='selectedItem = x'>{{x.firstname}}</li>
  </ul>
  </div>
  <br>
  
  <div>
  Persons name: {{selectedItem.firstName}}
  <br>Secound name: {{selectedItem.secondname}}
  <br>Age: {{selectedItem.age}}
  </div>
  

  人：
  
  
  
  {{x.firstname}
  
  
  
  人员姓名：{{selectedItem.firstName}
  
  Secound名称：{{selectedItem.secondname}
  
  年龄：{{selectedItem.Age}
  

---

您可以将重复项的索引传递给使用ng click调用的函数，并使用该索引将值从数组分配到范围

function MyCtrl($scope) {
    $scope.items = m;
    $scope.getDetails = function(index) {
        $scope.details = $scope.items[index]
    }
}

HTML:

人员姓名：{{details.firstname}

secondname:{{details.secondname}}

年龄：{{details.Age}

更新示例：

---

您可以将重复项的索引传递给使用ng click调用的函数，并使用该索引将值从数组分配到范围

function MyCtrl($scope) {
    $scope.items = m;
    $scope.getDetails = function(index) {
        $scope.details = $scope.items[index]
    }
}

HTML:

人员姓名：{{details.firstname}

secondname:{{details.secondname}}

年龄：{{details.Age}

更新示例：