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

Question

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

<li> 包含在 <li> 内并由 ng-repeat 创建的图像和按钮，例如喜欢、评论和分享。

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

我该如何解决这个问题？

代码： 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)";
}

感谢您的帮助和建议:)

Answer 1

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

Answer 2

每个按钮的 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.

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

AngularJS- How to handle each button created by ng-repeat

angularjs

angularjs-ng-repeat