AngularJS-如何处理由 ng-repeat 创建的每个按钮答案

【问题标题】：AngularJS- How to handle each button created by ng-repeatAngularJS-如何处理由 ng-repeat 创建的每个按钮
【发布时间】：2017-08-06 19:42:01
【问题描述】：

我是 AngularJS 的新手。我创建了<li>，我使用了 ng-repeat。

<li> 包含图片和按钮，如点赞、评论和分享，位于<li> 内部，由 ng-repeat 创建。

我已经制作了将空按钮替换为填充按钮的功能（通过更改按钮的背景图像）。但问题是这个触发器只适用于第一个like按钮，其他按钮不会改变。

我该如何解决这个问题？

代码： HTML：

<html>
<body>
<ul>
<li ng-repeat="media in images"><div class="imgsub">
     <label class="usrlabel">Username</label>
       <div class="imagedb">
         <input type="hidden" value="{{media.id}}">
         <img ng-src="{{ media.imgurl }}" alt="Your photos"/>
        </div>
        <!-- <br><hr width="50%"> -->
         <div class="desc">
          <p>{{media.alt}}</p>
           <input type="button" class="likebutton" id="likeb" ng-click="like(media.id)" ng-dblclick="dislike(media .id)"/>
           <input type="button" class="commentbutton"/>
           <input type="button" class="sharebutton"/>
          </div>
        </div>  <br>
   </li><br><br><br>

</ul>
</body>
</html>

JS：

$scope.like = function(imgid)
    {
        document.
        getElementById("likeb").
        style.backgroundImage = "url(src/assets/like-filled.png)";
        alert(imgid);
    }

$scope.dislike = function(imgid)
{
    document.
    getElementById("likeb").
    style.backgroundImage = "url(src/assets/like-empty.png)";
}

感谢您的帮助和建议:)

【问题讨论】：

How to set dynamic id(*ngFor) in ionic2/angular2?的可能重复

标签： angularjs angularjs-ng-repeat

【解决方案1】：

每个按钮的 id 应该是唯一的，但在您的情况下，所有按钮的 id 都是相同的（“likeb”）。您可以通过使用'$index'并将'$index'传递给函数来动态设置每个按钮的属性'id'的值，如下所示：

<input type="button" class="likebutton" id="{{$index}}" ng-click="like($index)" ng-dblclick="dislike($index)"/>

然后在您的控制器中，您可以使用带有传递值的函数。例如，

$scope.like = function(index)
    {
        document.
        getElementById(index).
        style.backgroundImage = "url(src/assets/like-filled.png)";
    }

在您的情况下，另一个不错的选择是使用指令ngClass。

【讨论】：

【解决方案2】：

使用 2 个 css 类来设置 liked 和 disliked 状态的样式，然后使用 ng-class 有条件地放置类而不是 DOM 处理。如果你真的想要执行 DOM 操作（我不会推荐），那么你可以传递 $event 和样式 $event.currentTarget 以便对该 DOM 对象执行一些操作。

【讨论】：