使用切換從ng獲取動態id從範圍重複

嗨，我做了一個由鏈接組成的用戶界面，如果點擊它們應該彈出另一個數據使用切換，但我從ng重複獲取這些數據，所以如果我點擊在一個;墨水的所有數據顯示，你可以請告訴他們如何調用切換方法，這樣在每個鏈接點擊只有特定的數據應該彈出。我的HTML代碼使用切換從ng獲取動態id從範圍重複

<!doctype html> 
 
<html ng-app="myApp"> 
 
    <head> 
 
    <title>UI</title> 
 
    <script src="jquery.js" type="text/javascript"></script> 
 
    <script src="angular.js" type="text/javascript"></script> 
 
    <script src="jquery-ui.js" type="text/javascript"></script> 
 
    <link rel="stylesheet" type="text/css" href="jquery-ui.css"/> 
 
    <script src="jquery-ui.min.js"></script> 
 
    <script type="text/javascript" src="main.js"></script> 
 
    <script type="text/javascript" src="script.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
 
    </head> 
 
    <body style="background-color:#F2F2F2" ng-controller="maincontroller"> 
 
    <div class="first"> 
 
     <div class="container"> 
 
     <table> 
 
      <tr> 
 
      </tr> 
 
     </table> 
 
     
 
     <table> 
 
      <tbody> 
 
      <tr> 
 
      <div class="get"> 
 
       <h4>Station</h4> 
 
       <p>HKG</p><h4>Airline Operator</h4> 
 
       <p>Y7</p><h4>Aircraft Model</h4> 
 
       <p>A300-600F</p><h4>Configuration Class</h4> 
 
       <p>Cargo</p><h4>Service Type</h4> 
 
       <p>Transit</p> 
 
      </div> 
 
      <th id="cool"><img src="pic4.png" height="30px" width="30px" padding-top="30px">TTS142</th> 
 
      <td ng-repeat="do in info" ng-style="{'backgroundColor':do.color1,'width':do.number}" class="fool"> 
 
       <a href="#" class="link">{{do.name}}</a> 
 
       <div class="tooltip">{{do.tooltip}}</div> 
 
      </td> 
 
      <th id="cool"><img src="pic3.png" height="30px" width="30px" padding-top="30px">TTS142</th> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     
 
     <table> 
 
      <tr> 
 
      <div class="get"> 
 
       <h4>Station</h4> 
 
       <p>HKG</p><h4>Airline Operator</h4> 
 
       <p>Y7</p><h4>Aircraft Model</h4> 
 
       <p>A300-600F</p><h4>Configuration Class</h4> 
 
       <p>Cargo</p><h4>Service Type</h4> 
 
       <p>Transit</p> 
 
      </div> 
 
      <th id="cool"><img src="pic4.png" height="30px" width="30px" padding-top="50px">TTS143</th> 
 
      <td ng-repeat="do in info1" ng-style="{'backgroundColor':do.color1,'width':do.number}"> 
 
       <a href="#" class="link">{{do.name}}</a> 
 
       <div class="tooltip"></div> 
 
      </td> 
 
      <th id="cool"><img src="pic3.png" height="30px" width="30px" padding-top="50px">TTS143</th> 
 
      </tr> 
 
     </table> 
 
     
 
     <table> 
 
      <tr> 
 
      <div class="get"> 
 
       <h4>Station</h4> 
 
       <p>HKG</p><h4>Airline Operator</h4> 
 
       <p>Y7</p><h4>Aircraft Model</h4> 
 
       <p>A300-600F</p><h4>Configuration Class</h4> 
 
       <p>Cargo</p><h4>Service Type</h4> 
 
       <p>Transit</p> 
 
      </div> 
 
      <th id="cool"><img src="pic4.png" height="30px" width="30px" padding-top="50px">TTS163</th> 
 
      <td ng-repeat="do in info2" ng-style="{'backgroundColor':do.color1,'width':do.number}"> 
 
       <a href="#" class="link">{{do.name}}</a> 
 
       <div class="tooltip">this file is on schedule</div> 
 
      </td> 
 
      <th id="cool"><img src="pic3.png" height="30px" width="30px" padding-top="50px">TTS163</th> 
 
      </tr> 
 
     </table> 
 
     
 
     <table> 
 
      <tr> 
 
      <div class="get"> 
 
       <h4>Station</h4> 
 
       <p>HKG</p><h4>Airline Operator</h4> 
 
       <p>Y7</p><h4>Aircraft Model</h4> 
 
       <p>A300-600F</p><h4>Configuration Class</h4> 
 
       <p>Cargo</p><h4>Service Type</h4> 
 
       <p>Transit</p> 
 
      </div> 
 
      <th id="cool"><img src="pic4.png" height="30px" width="30px" padding-top="50px">TTS182</th> 
 
      <td ng-repeat="do in info3" ng-style="{'backgroundColor':do.color1,'width':do.number}"> 
 
       <a href="#" class="link">{{do.name}}</a> 
 
       <div class="tooltip">this file is on schedule</div> 
 
      </td> 
 
      <th id="cool"><img src="pic3.png" height="30px" width="30px" padding-top="50px">TTS182</th> 
 
      </tr> 
 
     </table> 
 
     
 
     <div> 
 
      <ul class="legend"> 
 
      <li><span class="arrival"></span>Arrival</li> 
 
      <li><span class="Groundhandling"></span>Ground handling</li> 
 
      <li><span class="Departure"></span> Departure</li> 
 
      </ul> 
 
      <div> 
 
      <a href="#" class="link1">legend codes</a> 
 
      <div class="tooltip1"> 
 
       <table> 
 
       <tr>AOB - Aircraft on block</tr> 
 
       <br> 
 
       <tr>CC - Cabin cleaning</tr> 
 
       <br> 
 
       <tr>MB - Maintenance Block</tr> 
 
       <br> 
 
       <tr>TS - Toilet Servicing</tr> 
 
       <br> 
 
       <tr>WS - Water Servicing</tr> 
 
       <br> 
 
       <tr>R - Refulleing</tr> 
 
       <br> 
 
       <tr>PB - Push back</tr> 
 
       <br> 
 
       <tr>LT - Long Towing-Arrival to Parking</tr> 
 
       </table> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="second"> 
 
     <div class="container"> 
 
     <table style="width:100%"> 
 
      <tr> 
 
      <div class="get"> 
 
       <h4>Station</h4> 
 
       <p>HKG</p><h4>Airline Operator</h4> 
 
       <p>Y7</p><h4>Aircraft Model</h4> 
 
       <p>A300-600F</p><h4>Configuration Class</h4> 
 
       <p>Cargo</p><h4>Service Type</h4> 
 
       <p>Transit</p> 
 
      </div> 
 
      <th id="cool"><img src="pic4.png" height="50px" width="50px" padding-top="50px">TTS185</th> 
 
      <td ng-repeat="do in info1" ng-style="{'backgroundColor':do.color1,'width':do.number}"> 
 
       <a href="#" class="link">{{do.name}}</a> 
 
       <div class="tooltip">this file is on schedule</div> 
 
      </td> 
 
      <th id="cool"><img src="pic3.png" height="50px" width="50px" padding-top="50px">TTS185</th> 
 
      </tr> 
 
     </table> 
 
     
 
     <div> 
 
      <ul class="legend"> 
 
      <li><span class="arrival"></span>Arrival</li> 
 
      <li><span class="Groundhandling"></span>Ground handling</li> 
 
      <li><span class="Departure"></span> Departure</li> 
 
      </ul> 
 
      <div> 
 
      <a href="#" class="link1">legend codes</a> 
 
      <div class="tooltip1"> 
 
       <table> 
 
       <tr>AOB - Aircraft on block</tr> 
 
       <br> 
 
       <tr>CC - Cabin cleaning</tr> 
 
       <br> 
 
       <tr>MB - Maintenance Block</tr> 
 
       <br> 
 
       <tr>TS - Toilet Servicing</tr> 
 
       <br> 
 
       <tr>WS - Water Servicing</tr> 
 
       <br> 
 
       <tr>R - Refulleing</tr> 
 
       <br> 
 
       <tr>PB - Push back</tr> 
 
       <br> 
 
       <tr>LT - Long Towing-Arrival to Parking</tr> 
 
       </table> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div id="click1"> 
 
     <a href="#"><img src="pic7.png" width="30px" height="25px"></a> 
 
     </div> 
 
    </div> 
 
    <div id="click"><a href="#"><img src="pic6.png" width="30px" height="25px"></a></div> 
 
    </div> 
 
    </body> 
 
</html>

，這是我的角碼

var App = angular.module("myApp", []); 
 
App.controller("maincontroller", function ($scope) { 
 
    $scope.info = [ 
 
    { 
 
     name: 'aob', 
 
     number: '10%', 
 
     color1: '#FF3300', 
 
     tooltip: 'sbsjasjahsj' 
 
    }, 
 
    { 
 
     name: 'cc', 
 
     number: '20%', 
 
     color1: '#FF3300', 
 
     tooltip: 'sbsjasjahsj' 
 
    }, 
 
    { 
 
     name: 'mb', 
 
     number: '5%', 
 
     color1: '#00FFFF', 
 
     tooltip: 'sbsjasjahsj' 
 
    }, 
 
    { 
 
     name: 'ts', 
 
     number: '20%', 
 
     color1: '#00FFFF', 
 
     tooltip: 'sbsjasjahsj' 
 
    }, 
 
    { 
 
     name: 'ws', 
 
     number: '8%', 
 
     color1: '#00FFFF', 
 
     tooltip: 'sbsjasjahsj' 
 
    }, 
 
    { 
 
     name: 't', 
 
     number: '2%', 
 
     color1: '#00FFFF', 
 
     tooltip: 'sbsjasjahsj' 
 
    }, 
 
    { 
 
     name: 'aob', 
 
     number: '15%', 
 
     color1: '#66FF66', 
 
     tooltip: 'sbsjasjahsj' 
 
    }, 
 
    { 
 
     name: 'pb', 
 
     number: '2%', 
 
     color1: '#66FF66', 
 
     tooltip: 'sbsjasjahsj' 
 
    } 
 
    ]; 
 

 
    $scope.info1 = [ 
 
    { 
 
     name: 'aob', 
 
     number: '10%', 
 
     color1: '#FF3300' 
 
    }, 
 
    { 
 
     name: 'cc', 
 
     number: '20%', 
 
     color1: '#FF3300' 
 
    }, 
 
    { 
 
     name: 'mb', 
 
     number: '5%', 
 
     color1: '#00FFFF' 
 
    }, 
 
    { 
 
     name: 'ts', 
 
     number: '20%', 
 
     color1: '#00FFFF' 
 
    }, 
 
    { 
 
     name: 'ws', 
 
     number: '8%', 
 
     color1: '#00FFFF' 
 
    }, 
 
    { 
 
     name: 't', 
 
     number: '2%', 
 
     color1: '#00FFFF' 
 
    }, 
 
    { 
 
     name: 'aob', 
 
     number: '15%', 
 
     color1: '#66FF66' 
 
    }, 
 
    { 
 
     name: 'pb', 
 
     number: '2%', 
 
     color1: '#66FF66' 
 
    }, 
 
    { 
 
     name: 'ws', 
 
     number: '8%', 
 
     color1: '#66FF66' 
 
    } 
 
    ]; 
 

 
    $scope.info2 = [ 
 
    { 
 
     name: 'aob', 
 
     number: '10%', 
 
     color1: '#FF3300' 
 
    }, 
 
    { 
 
     name: 'ws', 
 
     number: '8%', 
 
     color1: '#ff3300' 
 
    }, 
 
    { 
 
     name: 'cc', 
 
     number: '20%', 
 
     color1: '#FF3300' 
 
    }, 
 
    { 
 
     name: 'mb', 
 
     number: '5%', 
 
     color1: '#00FFFF' 
 
    }, 
 
    { 
 
     name: 'ts', 
 
     number: '20%', 
 
     color1: '#00FFFF' 
 
    }, 
 
    { 
 
     name: 'ws', 
 
     number: '8%', 
 
     color1: '#00FFFF' 
 
    }, 
 
    { 
 
     name: 't', 
 
     number: '2%', 
 
     color1: '#00FFFF' 
 
    }, 
 
    { 
 
     name: 'aob', 
 
     number: '15%', 
 
     color1: '#66FF66' 
 
    }, 
 
    { 
 
     name: 'pb', 
 
     number: '2%', 
 
     color1: '#66FF66' 
 
    }, 
 
    { 
 
     name: 'ws', 
 
     number: '8%', 
 
     color1: '#66FF66' 
 
    } 
 
    ]; 
 

 
    $scope.info3 = [ 
 
    { 
 
     name: 'aob', 
 
     number: '10%', 
 
     color1: '#FF3300' 
 
    }, 
 
    { 
 
     name: 'cc', 
 
     number: '20%', 
 
     color1: '#FF3300' 
 
    }, 
 
    { 
 
     name: 'mb', 
 
     number: '5%', 
 
     color1: '#ff3300' 
 
    }, 
 
    { 
 
     name: 'ws', 
 
     number: '8%', 
 
     color1: '#00FFFF' 
 
    }, 
 
    { 
 
     name: 'ts', 
 
     number: '20%', 
 
     color1: '#00FFFF' 
 
    }, 
 
    { 
 
     name: 'ws', 
 
     number: '8%', 
 
     color1: '#00FFFF' 
 
    }, 
 
    { 
 
     name: 't', 
 
     number: '2%', 
 
     color1: '#00FFFF' 
 
    }, 
 
    { 
 
     name: 'aob', 
 
     number: '15%', 
 
     color1: '#66FF66' 
 
    }, 
 
    { 
 
     name: 'pb', 
 
     number: '2%', 
 
     color1: '#66FF66' 
 
    }, 
 
    { 
 
     name: 'ws', 
 
     number: '8%', 
 
     color1: '#66FF66' 
 
    } 
 
    ] 
 
});

和我的jQuery代碼

$(document).ready(function(){ 
 
$('#click').click(function(){ 
 
\t $('.first').hide(); 
 
\t $('.second').show(); 
 

 
}); 
 
$('#click1').click(function(){ 
 
\t $('.first').show(); 
 
\t $('.second').hide(); 
 

 
}); 
 

 

 
$('.link1').click(function(){ 
 
\t $(".tooltip1").toggle("slow"); 
 
}); 
 
$('.link').click(function(){ 
 
\t $(".tooltip").toggle("slow"); 
 
}); 
 

 

 
\t });

，最後我的CSS

.second { 
 
    display: none; 
 
} 
 
#click { 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
#click1 { 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
#good { 
 
    height: 20px; 
 
    width: 20px; 
 
    display: inline; 
 
    padding-top: 100px; 
 

 
} 
 
body { 
 
/**/ 
 
} 
 
h4 { 
 
    display: inline; 
 
} 
 
p { 
 
    display: inline; 
 
} 
 
#cool { 
 
    font-size: 10px; 
 
    width: 50px; 
 
    padding-top: 20px; 
 
} 
 
table { 
 
    padding-top: 20px; 
 
    table-layout: fixed; 
 
    width: 1000px; 
 
    height: 75px; 
 
} 
 
#hello { 
 
    table-layout: fixed; 
 
    width: 200px; 
 
    height: 50px; 
 
} 
 
#hello td { 
 
    width: 50px; 
 
} 
 
td { 
 
    padding-top: 25px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 

 
} 
 
.process { 
 
    display: none; 
 
} 
 
.tooltip { 
 
    width: 400px; 
 
    height: 200px; 
 
    padding: 30px; 
 
    padding-left: 20px; 
 
    background-color: #F2F2F2; 
 
    border: 1px solid #ccc; 
 
    box-shadow: 0 0 3px rgba(0, 0, 0, .3); 
 
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3); 
 
    border-radius: 3px; 
 
    -webkit-border-radius: 3px; 
 
    position: absolute; 
 
    display: none; 
 
    overflow: hidden; 
 
} 
 
.tooltip1 { 
 
    width: 600px; 
 
    height: 200px; 
 
    padding: 30px; 
 
    top: 0px; 
 
    background-color: #D3D3D3; 
 
    border: 1px solid #ccc; 
 
    box-shadow: 0 0 3px rgba(0, 0, 0, .3); 
 
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3); 
 
    border-radius: 3px; 
 
    -webkit-border-radius: 3px; 
 
    position: absolute; 
 
    top:; 
 
    left:; 
 
    display: none; 
 
    overflow: hidden; 
 
} 
 
.tooltip1 { 
 
    z-index: 100; 
 
} 
 
.tooltip { 
 
    z-index: 100; 
 
} 
 
.link { 
 
    display: block; 
 
    width: auto; 
 
    position: relative; 
 
} 
 
.link1 { 
 
    display: block; 
 
    width: auto; 
 
    position: center; 
 
} 
 
#jog { 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 400px; 
 
    height: 200px; 
 
} 
 
.get { 
 
    padding-left: 40px; 
 
} 
 
.get h4 { 
 
    font-size: 12px; 
 
    padding-left: 50px; 
 
} 
 
.get p { 
 
    font-size: 13px; 
 
    padding-left: 10px; 
 
} 
 
/* basic positioning */ 
 
.legend { 
 
    list-style: none; 
 
    padding-left: 150px; 
 
} 
 
.legend li { 
 
    float: left; 
 
    margin-right: 150px; 
 
} 
 
.legend span { 
 
    border: 1px solid #ccc; 
 
    float: left; 
 
    width: 12px; 
 
    height: 12px; 
 
    margin: 2px; 
 
} 
 
/* your colors */ 
 
.legend .arrival { 
 
    background-color: #FF3300; 
 
} 
 
.legend .Groundhandling { 
 
    background-color: #00FFFF; 
 
} 
 
.legend .Departure { 
 
    background-color: #66FF66; 
 
}

來源

2015-10-20 deepak arya

可你也提上[Plunker]相同的代碼（http://plnkr.co /）或[JS小提琴]（https://jsfiddle.net/） – Minato

http://plnkr.co/edit/fyMLb39mYBc9kOg4PK4k?p=preview –

查看我的評論下面的@vijayp的答案。 – LordTribual

當你正在處理class;您將面臨上述問題，因爲所有鏈接和div的類別爲link1,link，tooltip1和tooltip。

爲了避免它;你將不得不目標關聯tooltip股利如下：我想出了通過看你的HTML下面的代碼：

$('.link1').click(function(){ 
    $(this).closest("div").find(".tooltip1").toggle("slow"); 
}); 

$('.link').click(function(){ 
    $(this).closest("td").find(".tooltip").toggle("slow"); 
});

來源

2015-10-20 07:00:45 vijayP

謝謝我，我試着把我所有的代碼都放在蹲點上，如果你想看一看 http://plnkr.co/edit/fyMLb39mYBc9kOg4PK4k?p=preview –

你已經在使用AngularJS了。爲什麼你使用jQuery呢？只有使用Angular才能使用ng-repeat。 Angular還提供了將指定行爲附加到DOM元素（例如，通過事件偵聽器）的'directives'概念。在組件中考慮併爲DOM操作和事件監聽器使用指令，例如'click'。所以你的指令會在單個元素上註冊一個'click'事件，然後可以切換。 – LordTribual

@deepakarya - 如果你想使用jQuery，那麼你可以看看http://plnkr.co/edit/fFoqQwALcICriuyoVf4y?p=preview。它按照您的要求工作。 – vijayP

使用切換從ng獲取動態id從範圍重複

回答

相關問題