如何让ng-repeat绑定的ng-click默认加载首行数据并展示对应详情

1. 控制器初始化逻辑调整 #

你只需要在information列表数据赋值完成后，手动触发一次首条数据的详情拉取即可，无需修改现有点击逻辑：

• 若你的information是接口异步获取的，在接口回调中增加首条调用逻辑：

// 示例为$http请求，你替换成自己的实际请求逻辑即可
$http.get('/api/information/list').then(function (response) {
  $scope.information = response.data;
  // 新增初始化加载首条逻辑
  if (Array.isArray($scope.information) && $scope.information.length > 0) {
    $scope.getData($scope.information[0].id);
  }
})

• 若你的information是控制器内静态定义的，直接在赋值后调用即可：

$scope.information = [
  {id: 1, name: '张三'},
  {id: 2, name: '李四'},
  // 其他数据
];
// 初始化调用首条详情
if ($scope.information.length) {
  $scope.getData($scope.information[0].id);
}

2. 可选优化：详情区域代码简化 #

你当前详情区域使用ng-repeat并不合理，因为每次选中的都是单条详情，不需要循环渲染，可修改为如下代码减少不必要的性能消耗：

<div class="profileDetail" ng-if="informationDetail">
    <div>Age: {{informationDetail.age}}</div>
    <div>Gender: {{informationDetail.gender}}</div>
</div>

对应调整你的getData方法，把接口返回的单条详情直接赋值给$scope.informationDetail即可。

内容的提问来源于stack exchange，提问作者Muhamad