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

感谢您的帮助＆amp;意见建议:)。

Answer 1

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

<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。

Answer 2

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

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

2 个答案: