Question

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

<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中。原因是，所有存储库贡献者列表段的模板都是相同的。

问题：

在Repository列表下展开一个箭头图标后，所有其他li元素内容/子元素也会在显示相同内容时生效。那么如何只注入特定的li元素呢？而不是打扰他人。
如果单击一个元素，箭头图标也会生效，其余元素会更改，因为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");
};

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

1 个答案: