Angularjs：在一個DIV選擇一個span標籤選擇另一個span標籤NG重複

我有被使用NG重複顯示的帖子列表。在這我有一個問題和多個答案。答案顯示在作爲選項按鈕的span標記中。問題在於，如果我從一個問題中選擇一個答案（選項按鈕），則在另一個問題中選擇相似編號的答案。Angularjs：在一個DIV選擇一個span標籤選擇另一個span標籤NG重複

我的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; 
     } 
    };

在此先感謝。

來源

2016-01-06 shanky

你確定這是你的問題，所有的代碼？因爲它對我來說並不合適，所以你缺少一些零碎的東西。 – SjaakvBrabant

我還沒有包含css除了一切都有 – shanky

因爲我使用你的代碼，它甚至不會顯示'ngRepeat'中的項目，你可以做一個工作演示，以便我們可以幫助你嗎？ – SjaakvBrabant

發生此問題是由於存在具有相同的ID許多HTML標記。所以你需要區分每個ID。

例如，你會爲了使其獨特添加問題ID &答案編號。

在您的JSON數據

添加一個名爲IMAGEURL並設置新的屬性undefiend 並在結合

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

和NG-單擊傳遞對象

ng-click="chkimg(post)"

在chkimg功能設置IMAGEURL與價值

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

來源

2016-01-06 08:56:24

嗨@Hady Allam我試過你的解決方案，但現在一個問題的所有選項都被選中。 – shanky

如果您對每個問題都有4個答案，您將需要ImageUrl1，ImageUrl2，ImageUrl3，ImageUrl4 並使用之前實現的chkimg。 $ scope。chgImg =函數（後，varParam）{ 如果（varParam === 1）{//寫入執行 } 如果（varParam === 2）{// write實現 } 如果（varParam == = 3）{// write實現 } 如果（varParam === 4）{// write實現 } }; –

但如果您需要更好的解決方案。 in ** posts ** object創建另一個數組對象，例如** posts.Options ** 在這個對象中添加所有選項到這篇文章並添加到它ImageURL屬性和實現ng-click =「chkimg（option）」 –

國際海事組織有代碼的一些問題，你迭代過的職位數組，但不使用post對象的參數chgImg也ngrepeat會打印儘可能多的img1，img2 img3多少次迭代，因此當你將其設置成範圍，這將是不明確的範圍，以反映任何一項的div的變化，解決這將是通過一些索引與IMG1 +帖子ID是這樣的關聯，然後修改該方法相應地爲好。您可以使用某個索引爲每個元素編制索引，並在ngrepeat中不斷遞增，這樣可以使元素具有唯一性並允許保留和索引。

來源

2016-01-06 08:52:08 Vaibhav

Angularjs：在一個DIV選擇一個span標籤選擇另一個span標籤NG重複

回答

相關問題