檢查div而不是複選框

Question

我有一個div，在那裏顯示我可以邀請參加我的拍賣的用戶列表。該列表是從DB

一切工作正常加載，我要檢查所有的標籤，而不是複選框，所以我做這樣的事情：

<div ng-show="showBid" class="panel panel-default"> 
<div class="panel-heading">Invite Members</div> 
<div class="panel-body"> 
    <div ng-repeat="user in users"> 
     <div class="user"> 
      <input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)" name="checkbox" class="checkbox" id="checkbox"> 
      <label class="col-md-4" ng-hide="user.name == profile" for="checkbox"> 
       <img ng-src="{{user.img}}" class="userImage"> 
       <div class="username"> {{user.name}}</div> 
       <div class="userrole"> {{user.role}} </div> 
       <div class="usercompany">{{user.company}}</div> 
      </label> 
     </div> 
    </div> 
</div> 
</div> 

和我這樣做對CSS：

label { 
    display: block; 
    cursor: pointer; 
} 
.checkbox { 
    display: none; 
} 
.checkbox:checked + label { 
    background-color: lightseagreen; 
} 

但這僅適用於第一個用戶，它並不適用於其他

Answer 1

這將不IDS上工作input

var myApp = angular.module('myApp', []) 
 
    .controller('UsersCtrl', function($scope) { 
 
    $scope.users = [{ 
 
     name: 'User One', 
 
     role: 'Admin', 
 
     company: 'ABC Inc.' 
 
    }, { 
 
     name: 'User Two', 
 
     role: 'Manafer', 
 
     company: 'XYZ Inc.' 
 
    }, { 
 
     name: 'Foo Bar', 
 
     role: 'Admin', 
 
     company: 'ABC Inc.' 
 
    }]; 
 
    });

body { background-color: #eee; color: #444; padding: 20px; } 
 

 
.user label { 
 
    display: block; 
 
    background-color: #fff; 
 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
 
    margin: 2px; 
 
    padding: 0; 
 
    cursor: pointer; 
 
} 
 
.username { font-size: 14px; font-weight: bold; } 
 
.user label>div { padding: 4px 10px; } 
 
.user label .checkbox { display: none; } 
 

 
.user label .checkbox:checked+div { background-color: teal; color: white; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="UsersCtrl"> 
 
    <div ng-repeat="user in users"> 
 
    <div class="user"> 
 
     <label class="col-md-4" ng-hide="user.name == profile"> 
 
     <input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)" name="checkbox" class="checkbox"> 
 
      <div> 
 
      <img ng-src="{{user.img}}" class="userImage"> 
 
      <div class="username">{{user.name}}</div> 
 
      <div class="userrole">{{user.role}}</div> 
 
      <div class="usercompany">{{user.company}}</div> 
 
      </div> 
 
     </label> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

label { 
 
    display: block; 
 
    background-color: #E4E4E4; 
 
    border-bottom: 1px solid #CCC; 
 
    cursor: pointer; 
 
    padding: 5px 10px; 
 
} 
 

 
label * { 
 
    display: inline-block; 
 
} 
 
.checkbox { 
 
    display: none; 
 
} 
 
.checkbox:checked + label { 
 
    background-color: red; 
 
    color: white; 
 
}

<div ng-show="showBid" class="panel panel-default"> 
 
    <div class="panel-heading">Invite Members</div> 
 
    <div class="panel-body"> 
 
    <div ng-repeat="user in users"> 
 
     <div class="user"> 
 
     <input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)" name="checkbox" class="checkbox" id="user-{{user.id}}"> 
 
     <label class="col-md-4" ng-hide="user.name == profile" for="user-{{user.id}}"> 
 
      <img ng-src="{{user.img}}" class="userImage"> 
 
      <div class="username">Messi</div> 
 
      <div class="userrole">Striker</div> 
 
      <div class="usercompany">Barcelona</div> 
 
     </label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>