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

标签 javascript angularjs angularjs-ng-repeat

我有一些重复的卡片，从 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 - 仅加载在此页面上使用的 flexslider 类型

下一篇：javascript - CKEDITOR.ENTER_BR 不适用于 CKEditor

相关文章：

javascript - 无法覆盖此网站的 CSS

javascript - 选择过滤器无法正常工作，Angular js ng-options

javascript - AngularJS:按 ng-repeat 中的日期排序，其中键是日期

Javascript 形式 - 根据选择不同的电子邮件

javascript - 单引号会导致 XSS 攻击吗？

javascript - 谷歌地图不应用样式

AngularJS HTTP GET 请求返回缓存数据

javascript - 从字符串中删除字符

javascript - AngularJS 显示数组中的列表

javascript - AngularJS 动态过滤器列表

©2024 IT工具网  联系我们