html - 根据 Angular 中点击的 img 获取相关 Pills 内容

Question

给定以下场景:

• Angular 1.7.2
• Bootstrap 3

用户点击 img 后我遇到了一些问题:

我得到了什么

点击任何 img，弹出一个相关的模态窗口，其中包含正确的内容

点击 IMG 1:一切正常

点击 IMG 2/3/4:药丸不起作用

单击 IMG'S MODAL 2/3/4 的选项卡，然后单击 IMG's 1 thepills 显示的是 2/3/4 与 IMG 1 相关的最后一次点击的内容。

例如。如果我单击 IMG 4 - TAB 3，然后单击 IMG 1，即使我在 TAB 1 上，我也会获得 IMG 1 TAB 3 的内容

我想要得到什么

点击任何 img，弹出一个相关的模态窗口，其中包含正确的内容和相关的特定 pills

问题可能来自

我假设所描述的问题来自 pills 的 id，它在每个模态上都保持不变。

我不想/不能使用:angular-ui.github.io/bootstrap/#!#modal解决问题

var app = angular.module('app', ['ngSanitize']);

app.controller('MainController', ['$scope',
function($scope){
	
	
	$scope.mainTitle = 'MEET THE TEAM',
	$scope.headLine = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
	$scope.teamSection = 'EXECUTIVE TEAM',
	
		
	$scope.modals = [
		{
			bio: "TAB 1",
			experience: "TAB 2",
			motto: "TAB 3"
		}
	];	
		
	
	$scope.teams = [
		{
		name : 'name1',
		role : 'role1',
		mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
		roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
		bio : 'bio text here1', 
		experience : 'experience text here1',
		author : 'some more text1',
		mobile: 'READ MORE'
	
		},
		
		{
		name : 'name2',
		role : 'role2',
		mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
		roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
		bio : 'bio text here1', 
		experience : 'experience text here2',
		author : 'some more text2',
		mobile: 'READ MORE'
		},
		{
		name : 'name3',
		role : 'role3',
		mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
		roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
		bio : 'bio text here1', 
		experience : 'experience text here3',
		author : 'some more text3',
		mobile: 'READ MORE'
		},
		{
		name : 'name4',
		role : 'role4',
		mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
		roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
		bio : 'bio text here1', 
		experience : 'experience text here4',
		author : 'some more text4',
		mobile: 'READ MORE'
		}
	];
	
}]);

body,
html {
  margin: 0;
  padding: 0;
  font-family: Montserrat;
  height: 100%;
}

.p0 {
  padding: 0;
}

.container {
  margin-top: 50px;
}

h1 {
  text-align: center;
  font-size: 35px;
  padding-bottom: 20px;
}

h2 {
  text-align: center;
  font-size: 15px;
  line-height: 150%;
  padding-bottom: 50px;
}

h3 {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.flex-parent {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  padding: 50px 0;
}

.flex-child-edge {
  flex-grow: 2;
  height: 1px;
  background-color: #e3e3e3;
  border: 0.5 #e3e3e3 solid;
}

.flex-child-text {
  flex-basis: auto;
  flex-grow: 0;
  margin: 0px 5px 0px 5px;
  text-align: center;
  padding: 20px;
  font-size: 13px;
  line-height: 150%;
  color: #777777;
  letter-spacing: 3px;
}

.flex-parent-second {
  height: 150px;
}

.person {
  text-align: center;
  margin-bottom: 50px;
}

.person img {
  cursor: pointer;
}

.name {
  font-size: 15px;
  margin-top: 10px;
  padding-bottom: 8px;
  letter-spacing: 3px;
  line-height: 150%;
}

.role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 150%;
}

.line {
  width: 50px;
  height: 1px;
  background-color: #e3e3e3;
}

.modal-header {
  border-bottom: 0;
}

.roundProfile {
  margin: 0 auto;
  text-align: center !important;
}

.roundProfile img {
  max-width: 150px;
  margin-bottom: 15px;
}

hr {
  max-width: 30%;
}

.modal-open .modal {
  background-color: rgba(255, 255, 255, 0.8);
}

.modal-content {
  background-image: url(../images/e.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0 10px #e3e3e3;
  border: none;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
  background-color: #b04890;
  font-weight: 500;
  color: #ffffff !important;
}

.modal-body {
  padding: 0 50px 50px;
}

.nav-pills {
  text-align: center;
  margin: 30px 0;
}

.nav-pills>li {
  text-align: center;
  float: none;
  display: inline;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.nav>li>a {
  display: inline;
  padding: 5px 15px;
}

.tab-content p {
  font-size: 13px;
  line-height: 200%;
  text-align: center;
  padding-left: 15px;
  font-weight: 400;
}

.author {
  font-style: italic;
  display: block;
  text-align: center;
  font-size: 11px;
  margin-top: 20px;
}

.flex-parent {
  padding: 0 0 50px 0;
}

.fade {
  opacity: 1 !important;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
  opacity: 0.5 !important;
}

@media (max-width:767px) {
  .red-more-mobile {
    font-size: 10px;
    position: relative;
    bottom: 20px;
    background-color: rgba(255, 255, 255, 0.80);
    padding: 5px 0;
    letter-spacing: 2px;
    margin-bottom: -20px;
  }
  .container {
    padding-left: 0;
    padding-right: 0;
  }
  .modal-body {
    padding: 0px 20px 20px 20px;
  }
  .nav>li>a {
    display: inline;
    padding: 2px 5px;
  }
  .nav-pills>li {
    letter-spacing: 1px;
  }
  .name {
    font-size: 10px;
  }
  .role {
    font-size: 9px;
  }
  h2 {
    padding-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
  }
  .flex-parent {
    padding: 0;
  }
  .flex-parent-second {
    position: relative;
    top: 0px;
    height: 50px;
    margin-bottom: 50px;
  }
}

<!doctype html>
<html>

<head>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta charset="UTF-8">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Include the AngularJS library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.7.5/angular-sanitize.js"></script>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <!--<script src="js/respond.js"></script>-->
</head>

<body ng-app="app">
  <div class="container" ng-controller="MainController">
    <h1>{{ mainTitle }}</h1>
    <h2>{{ headLine }}</h2>



    <div class="flex-parent">
      <div class="flex-child-edge"></div>
      <div class="flex-child-text">
        <h3>{{ teamSection }}</h3>
      </div>
      <div class="flex-child-edge"></div>
    </div>

    <div class="main" ng-repeat="team in teams">

      <!-- PERSON 1 -->
      <div class="col-xs-6 col-md-3 col-sm-4 person">

        <img ng-src="{{ team.mainImage }}" class="img-responsive center-block fade" alt="{{team.alt}}" data-toggle="modal" data-target="#person{{$index}}" />
        <div class="red-more-mobile visible-xs" data-toggle="modal" data-target="#person{{$index}}">{{team.mobile}}</div>
        <div class="name">{{ team.name }}</div>
        <div class="role">{{ team.role }}</div>
      </div>

      <!-- Modal -->

      <div class="modal " id="person{{$index}}" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="roundProfile row">
              <div class="col-xs-12">
                <img ng-src="{{ team.roundImage }}" class="img-responsive img-circle center-block" alt="" />
              </div>
              <div class="name">{{ team.name }}</div>
              <div class="role">{{ team.role }}</div>
              <hr>
            </div>
            <div class="modal-body" ng-repeat="modal in modals">
              <ul class="nav nav-pills">
                <li class="active"><a data-toggle="pill" href="#home">{{modal.bio}}</a></li>
                <li><a data-toggle="pill" href="#menu1">{{modal.experience}}</a></li>
                <li><a data-toggle="pill" href="#menu2">{{modal.motto}}</a></li>
              </ul>
              <div class="tab-content">
                <div id="home" class="tab-pane  in active">
                  <p ng-bind-html="team.bio"></p>
                </div>
                <div id="menu1" class="tab-pane ">
                  <p>{{ team.experience }}</p>
                </div>
                <div id="menu2" class="tab-pane ">
                  <p>{{ team.motto }}<span class="author">{{ team.author }}</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>



  <!-- Modules -->
  <script src="js/app.js"></script>

  <!-- Controllers -->
  <script src="js/controllers/MainController.js"></script>
</body>

</html>

Answer 1

根据你的问题，我假设模态窗口正确打开，但药丸表现不正常。这样做的原因是所有模式内的选项卡都有相同的 ID。

<div class="tab-content">
  <div id="home" class="tab-pane  in active">
    <p ng-bind-html="team.bio"></p>
  </div>
   <div id="menu1" class="tab-pane ">
     <p>{{ team.experience }}</p>
   </div>
    <div id="menu2" class="tab-pane ">
  <p>{{ team.motto }}<span class="author">{{ team.author }}</span></p>
</div>
</div>

将 ids 更改为类似 menu1_{{$index}} 的内容及其相应的链接可以解决您的问题。
但理想情况下，我认为您应该重新考虑架构，使其成为一些干净且可维护的代码。我会建议类似的方法，在 dom 上保留一个模式，并在单击任何图像时动态加载您需要的内容。