在特定 <li> 元素下插入 html ng-repeat - AngularJS

Question

我已经开始从复数视觉学习 AngularJS。根据教程，我设法使用路由和基本指令编写了一个 Github 用户列表应用程序。

<div ng-controller="RepositoryController">
<h3 ng-hide="!repoDetails">Repository owned:</h3>

<div ng-repeat="repo in repoDetails">    

    <img ng-src="{{contributorsList == undefined && './Images/collapsed.jpg' || './Images/expanded.jpg'}}" ng-click="listContributors(repo.name)" />{{repo.name}}
    {{contributorsList == undefined}}
    <div id={{repo.name}} style="padding-left: 55px">            
    </div>
</div>

请看http://plnkr.co/edit/ztArGBEmPeoNMk5khkDi

从应用程序中可以看到，第一个主页列出了 Github 的用户，点击表格中的个人资料 URL 后，它详细列出了用户信息，在底部，它列出了拥有的存储库。

您可以单击每个存储库的箭头图标，其中会展开以显示该存储库的贡献者。

如您所见，repositoryController.js 有一个代码，它将带有 ng-repeat 指令的 UL-LI 标签插入到 html/view 中。原因是，所有存储库贡献者列表段的模板都是相同的。

问题：

1. 在 Repository 列表下展开一个箭头图标时，所有其他 li 元素内容/子项也会在显示相同内容时受到影响。那么如何只为特定的 li 元素注入呢？且不打扰他人。

2. 如果单击一个元素，箭头图标也会生效，其余的会更改，因为 ng-src 具有条件检查。那么如何在用户单击时更改特定 li 元素的图标，而不是每次都从控制器发送。

欢迎任何其他代码改进和建议。

请提供您对问题的详细解释和建议。帮助我更好地理解和学习。

谢谢

Answer 1

如果您发现自己需要使用 $compile 或在 Angular 应用程序中进行大量 DOM 操作，则表明您走错了方向。这是一个示例，说明如何在不进行任何手动 DOM 操作或 HTML 字符串解析的情况下执行此操作。

http://plnkr.co/edit/DHelPTU7gqPPEQzo41fo?p=preview

HTML

<div ng-repeat="repo in repoDetails">    

    <img 
      ng-show="!repo.showContributors"
      src="http://cdn.shopify.com/s/files/1/0434/3957/t/32/assets/icon-arrow-right-small.png" 
      ng-click="listContributors(repo)" />
    <img 
      ng-show="repo.showContributors"
      src="http://cdn.shopify.com/s/files/1/0434/3957/t/26/assets/icon-arrow-down-small.png" 
      ng-click="repo.showContributors = false" />
    {{repo.name}}
    {{contributorsList == undefined}}
    <div id={{repo.name}} style="padding-left: 55px">
      <ul ng-if="repo.showContributors">
        <li ng-repeat='contributor in repo.contributors'>{{contributor.login}}</li>
      </ul>
    </div>
</div>

JS

$scope.listContributors = function (repo) {
  repo.showContributors = true;
  loadContributors(repo.name).then(function(response) {
    repo.contributors = response.data;
  });
}

var loadContributors = function (repoName) {
    return $http.get("https://api.github.com/repos/" + $routeParams.username + "/" + repoName + "/contributors");
};