Question

我有使用ng-repeat显示的帖子列表。在这里我有一个问题和多个答案。答案显示在span标记中，其作用为选项按钮。这是问题，如果我从一个问题中选择一个答案（选项按钮），那么在另一个问题中选择相似的编号答案。

我的html代码：

<div ng-repeat="post in posts" >
        <form id="pollForm" ng-submit="submitPoll()">

          <span class="quest"> <strong>Poll:</strong>{{post.question}}</span><br>

          <div class="post-container">
          <br>
              <span ng-style="{'background-image':'url('+ img1 +')'}" ng-click="chgImg(1)" 
                    class="Pollchoice--radio">
              </span>
              <span class="Pollchoice--text">{{post.choice1}}</span><br><br>

              <span ng-style="{'background-image':'url('+ img2 +')'}" ng-click="chgImg(2)" 
                    class="Pollchoice--radio"></span>
              <span class="Pollchoice--text">{{post.choice2}}</span><br><br>

              <span ng-style="{'background-image':'url('+ img3 +')'}" ng-click="chgImg(3)" 
                    ng-show="post.choice3" class="Pollchoice--radio"></span>
              <span ng-show="post.choice3" class="Pollchoice--text">{{post.choice3}}</span><br><br>

              <span ng-style="{'background-image':'url('+ img4 +')'}" ng-click="chgImg(4)" 
                    ng-show="post.choice4" class="Pollchoice--radio"></span>
              <span ng-show="post.choice4" class="Pollchoice--text">{{post.choice4}}</span><br><br>

              <hr/>

              <div>
                  <button id="btn" type="submit" class="btn btn-default">Vote</button> 
                  <span style="margin:0 0 0 20px"> 50,000 votes</span> &#0149; <span> 23 hours left</span> 
              </div>

              <br>
          </div>

          <br><br><br>
        </form>
    </div>

的javascript：

      $scope.chgImg = function(varParam){
        //alert(varParam);
        if(varParam === 1){
            $scope.img1 = "/images/chk.svg";$scope.img2 = undefined;
            $scope.img3 = undefined;$scope.img4 = undefined;
        }

        if(varParam === 2){
            $scope.img2 = "/images/chk.svg";$scope.img1 = undefined;
            $scope.img3 = undefined;$scope.img4 = undefined;
        }

        if(varParam === 3){
            $scope.img3 = "/images/chk.svg";$scope.img1 = undefined;
            $scope.img2 = undefined;$scope.img4 = undefined;
        }

        if(varParam === 4){
            $scope.img4 = "/images/chk.svg";$scope.img1 = undefined;
            $scope.img2 = undefined;$scope.img3 = undefined;
        }
    };

提前致谢。

Answer 1

由于有许多HTML标记具有相同的ID，因此会出现此问题。所以你需要区分每个id。

例如，您将添加问题ID＆amp;回答id以使其独特。

OR

在您的JSON数据中添加一个名为ImageURL的新属性，并设置为undefiend 并在你的约束

ng-style="{'background-image':'url('+{post.ImageURL}+')'}"

并在ng-click中传递对象

ng-click="chkimg(post)"

并在chkimg函数中将ImageURL设置为值

post.ImageURL="/images/chk.svg";

Answer 2

IMO代码存在一些问题，你是在post数组中迭代而不是在chgImg的参数中使用post对象，你的ngrepeat会打印尽可能多的img1，img2 img3，因为它会迭代很多次，因此当你设置时在范围内，这对于反映任何一个div中的变化的范围来说是不明确的，对此的解决方案是通过某些索引与img1 + postID相关联，然后相应地修改方法。您可以使用某个索引为每个元素编制索引，并在ngrepeat中继续递增，这样就可以使元素保持唯一并允许保留和索引。

Angularjs：在一个div中选择一个span标记选择另一个span标记ng-repeat

2 个答案: