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

【问题标题】：Get related Pills content according with clicked img in Angular根据Angular中点击的img获取相关Pills内容
【发布时间】：2019-04-10 22:43:33
【问题描述】：

鉴于以下情况：

  • Angular 1.7.2
  • 引导程序 3

用户点击图片后我遇到了一些问题：

我得到了什么

点击任意一个img，会弹出一个相关的模态窗口，里面有正确的内容

点击 IMG 1：一切正常

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

点击 IMG'S MODAL 2/3/4 的选项卡，然后点击 IMG'S 1 药丸正在显示与 IMG 1 相关的 2/3/4 的最后一次点击内容。

例如。如果我单击 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>

【问题讨论】：

    标签： html angularjs twitter-bootstrap-3


    【解决方案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 上保留一个模态并动态加载您需要的内容，点击任何图像。

    【讨论】：

    • 我一定会尝试采纳您的建议。我会及时通知你。谢谢！
    • 刚刚尝试了menu1_{{$index}} 解决方案，但没有成功。我将尝试“重新思考架构”。你认为使用directives 会有所帮助吗？
    • 您是否也相应地更新了导航药片？ &lt;li&gt;&lt;a data-toggle="pill" href="#menu1_{{index}}"&gt; ?
    • 是的，但没有运气:(
    • @Matt 是的，一个指令会更好。但我会推荐angular-ui.github.io/bootstrap/#!#modal，因为您使用的是引导程序。
    【解决方案2】：

    我做了什么来解决它：

    • 从modal-body 中删除了ng-repeat="modal in modals"
    • 选项卡的名称已被硬编码
    • 使用...{{$index}} 如上所述modal 和@Anees 用户建议

    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 here2', 
		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 here3', 
		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 here4', 
		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">
              <ul class="nav nav-pills">
                <li class="active"><a data-toggle="pill" href="#home{{$index}}">TAB 1</a></li>
                <li><a data-toggle="pill" href="#menu1{{$index}}">TAB 2</a></li>
                <li><a data-toggle="pill" href="#menu2{{$index}}">TAB 3</a></li>
              </ul>
              <div class="tab-content">
                <div id="home{{$index}}" class="tab-pane in active">
                  <p ng-bind-html="team.bio"></p>
                </div>
                <div id="menu1{{$index}}" class="tab-pane ">
                  <p>{{ team.experience }}</p>
                </div>
                <div id="menu2{{$index}}" 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>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2021-10-01
      • 2023-04-07
      • 2011-11-16
      • 1970-01-01
      • 1970-01-01
      • 2013-03-21
      • 1970-01-01
      • 2016-05-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode