javascript - Md-switch 在 ng-repeat 中不起作用-6ren

javascript - Md-switch 在 ng-repeat 中不起作用

转载作者：行者123 更新时间：2023-12-03 07:39:36

我有一些重复的卡片，从 json 中检索。除了 md-switch 之外，一切正常。我想要切换按钮，它可以更改(不可见)状态和图像。但它改变了所有的图片。为什么？

angular.module('MyApp',['ngMaterial']).controller('SwitchDemoCtrl', function($scope) {
  $scope.data = {
    cb1: true
  }; 

  
    $scope.contacts = [
        { name: 'Text 1', phone: '0101 423' },
        { name: 'Text 2', phone: '0101 6123' },
        { name: 'Text 3', phone: '0101 2223' },
        { name: 'Text 4', phone: '0101 4512' },
        { name: 'Text 5', phone: '0101 2135' },
        { name: 'Text 6', phone: '0101 7' },
        { name: 'Text 7', phone: '0101 1235' }
	];
 
  });

.switchdemoBasicUsage .inset {
  padding-left: 25px;
  padding-top: 25px; }


 .card .header {
    padding: 15px 20px;
    height: 90px;
}

.card .content { padding: 18px 12px 0px; }
 
 
.card h5 {
    margin: 5px 0px; 
    line-height: 20px;
}


 
.text-center { text-align: center;}
h4, .h4 {
    font-size: 18px;
}
h4, h5 {
    margin-top: 10px;
    margin-bottom: 10px;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { 
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

p { margin: 0px 0px 10px; }

.card .cover{
    height: 105px;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
}
.card .cover img{  width: 100%; }
.card .user{
    border-radius: 50%;
    display: block;
    height: 120px;
    margin: -55px auto 0;
    overflow: hidden;
    width: 120px;
}
.card .user img{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 4px solid #FFFFFF;
    width: 89%;
} 
.card .footer { border-top: 1px solid #EEE; }

.card .name {
    font-size: 20px;
    margin: 0;
    text-align: center;
    text-transform: capitalize;
    color: #444;
    padding-left: 0;
    line-height: 28px;
    padding-right: 28px;
    padding-left: 28px;
} 

.card .profession {
    color: #999;
    text-align: center; 
    font-size: 16px
}

.card h5 {
    margin: 5px 0px;
    font-weight: 400;
    line-height: 20px;
}

h5, .h5 {
    font-size: 14px;
} 
.cards {
    width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.42857;
    color: #333;
}

.cards::before, .cards::after {
    display: table;
    content: " ";
}

.cards::after {
    clear: both;
} 

.riga {
    margin: 0;
}

.riga::before, .riga::after {
    display: table;
    content: " ";
}

.r2 {
    margin-left: 3.33333%;
    width: 100%;
    float: left;
} 
.r4 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 0;
    margin-right: 25px;
    padding-left:51px;
    width:490px;
    margin-top: 25px;
    background-color:#fff;
}

 
 
 body {
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0;
}

    
    <link rel='stylesheet prefetch' href='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.5/angular-material.css'>
<link rel='stylesheet prefetch' href='https://material.angularjs.org/1.0.5/docs.css'>

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js'></script> 
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js'></script> 
<script src='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.5/angular-material.js'></script>

    <div ng-app="MyApp" class="inset switchdemoBasicUsage" ng-controller="SwitchDemoCtrl" ng-cloak="">



  


                <div class="cards">
                    <div class="riga"> 
                        <div class="r2">
                              <div class="r4" ng-repeat="contact in contacts"> 
                                <div class="card-container manual-flip">
                                    <a href="#">
                                        <div class="card">
                                            <div class="front">
                                                <div class="cover">
                                                    <img src="https://c2.staticflickr.com/8/7375/9570673625_d2feb49fe8_b.jpg"/>
                                                </div>
                                                <div class="user"></div> 
                                                    <h3 class="name">{{contact.name}}</h3>
                                                    <p class="profession">{{contact.phone}}</p>                                          

            <md-switch ng-model="data.cb2" aria-label="Switch 1"  class="md-warn"> 

          <img ng-src="{{data.cb2 ? 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzo0DRPGadvLqBdF7zeykKrCwVALRLU3OGThkJZW2DvF_rqLCd' : 'https://cdn3.iconfinder.com/data/icons/basics-material-design-vol-1/100/material_design_interface_refresh_load_restart_lock_unlock-128.png'}}">

            </md-switch>


                                            </div> 
                                        </div>
                                    </a>
                                </div>
                            </div>
                          </div>
                        </div>
                      </div>



</div>

附:打开片段的完整页面以便更好地查看!

最佳答案

定义 cb2 内部触点并将其用于每个开关。请查看下面的工作演示。

angular.module('MyApp',['ngMaterial']).controller('SwitchDemoCtrl', function($scope) {
        
    $scope.contacts = [
        { name: 'Text 1', phone: '0101 423', cb2: false},
        { name: 'Text 2', phone: '0101 6123', cb2: false },
        { name: 'Text 3', phone: '0101 2223', cb2: false },
        { name: 'Text 4', phone: '0101 4512', cb2: false },
        { name: 'Text 5', phone: '0101 2135', cb2: false },
        { name: 'Text 6', phone: '0101 7', cb2: false },
        { name: 'Text 7', phone: '0101 1235', cb2: false }
	];
 
  });

.switchdemoBasicUsage .inset {
  padding-left: 25px;
  padding-top: 25px; }


 .card .header {
    padding: 15px 20px;
    height: 90px;
}

.card .content { padding: 18px 12px 0px; }
 
 
.card h5 {
    margin: 5px 0px; 
    line-height: 20px;
}


 
.text-center { text-align: center;}
h4, .h4 {
    font-size: 18px;
}
h4, h5 {
    margin-top: 10px;
    margin-bottom: 10px;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { 
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

p { margin: 0px 0px 10px; }

.card .cover{
    height: 105px;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
}
.card .cover img{  width: 100%; }
.card .user{
    border-radius: 50%;
    display: block;
    height: 120px;
    margin: -55px auto 0;
    overflow: hidden;
    width: 120px;
}
.card .user img{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 4px solid #FFFFFF;
    width: 89%;
} 
.card .footer { border-top: 1px solid #EEE; }

.card .name {
    font-size: 20px;
    margin: 0;
    text-align: center;
    text-transform: capitalize;
    color: #444;
    padding-left: 0;
    line-height: 28px;
    padding-right: 28px;
    padding-left: 28px;
} 

.card .profession {
    color: #999;
    text-align: center; 
    font-size: 16px
}

.card h5 {
    margin: 5px 0px;
    font-weight: 400;
    line-height: 20px;
}

h5, .h5 {
    font-size: 14px;
} 
.cards {
    width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.42857;
    color: #333;
}

.cards::before, .cards::after {
    display: table;
    content: " ";
}

.cards::after {
    clear: both;
} 

.riga {
    margin: 0;
}

.riga::before, .riga::after {
    display: table;
    content: " ";
}

.r2 {
    margin-left: 3.33333%;
    width: 100%;
    float: left;
} 
.r4 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 0;
    margin-right: 25px;
    padding-left:51px;
    width:490px;
    margin-top: 25px;
    background-color:#fff;
}

 
 
 body {
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0;
}

    
    <link rel='stylesheet prefetch' href='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.5/angular-material.css'>
<link rel='stylesheet prefetch' href='https://material.angularjs.org/1.0.5/docs.css'>

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js'></script> 
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js'></script> 
<script src='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.5/angular-material.js'></script>

    <div ng-app="MyApp" class="inset switchdemoBasicUsage" ng-controller="SwitchDemoCtrl" ng-cloak="">



  


                <div class="cards">
                    <div class="riga"> 
                        <div class="r2">
                              <div class="r4" ng-repeat="contact in contacts"> 
                                <div class="card-container manual-flip">
                                    <a href="#">
                                        <div class="card">
                                            <div class="front">
                                                <div class="cover">
                                                    <img src="https://c2.staticflickr.com/8/7375/9570673625_d2feb49fe8_b.jpg"/>
                                                </div>
                                                <div class="user"></div> 
                                                    <h3 class="name">{{contact.name}}</h3>
                                                    <p class="profession">{{contact.phone}}</p>                                          

            <md-switch ng-model="contact.cb2" aria-label="Switch 1"  class="md-warn"> 

          <img ng-src="{{contact.cb2 ? 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzo0DRPGadvLqBdF7zeykKrCwVALRLU3OGThkJZW2DvF_rqLCd' : 'https://cdn3.iconfinder.com/data/icons/basics-material-design-vol-1/100/material_design_interface_refresh_load_restart_lock_unlock-128.png'}}">

            </md-switch>


                                            </div> 
                                        </div>
                                    </a>
                                </div>
                            </div>
                          </div>
                        </div>
                      </div>



</div>

关于javascript - Md-switch 在 ng-repeat 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35463069/

文章推荐： javascript - ng-show 和 ng-change 不必要的延迟

文章推荐： javascript - CKEDITOR.ENTER_BR 不适用于 CKEditor

文章推荐： javascript - 仅加载在此页面上使用的 flexslider 类型

文章推荐： javascript - JS 中两个相同函数之间的间隙

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Md-switch 在 ng-repeat 中不起作用