在列表視圖的頭像懸停時，它應該變爲複選框

我有一個要求，我面臨的問題。要求是：我有一個列表視圖，其中每個列表項目都有一個圓形的阿凡達。在列表視圖的頭像懸停時，它應該變爲複選框

我想要什麼？在懸停列表項目的圓形AVATAR時，它應該變成複選框來選擇這個列表項目。

而且所有上面和下面的列表項目也應該顯示CHECKBOX而不是頭像列表的多選列表項。

我在我的項目中使用了angular-material和angularJs。

爲了演示目的，請檢查鏈接。 https://inbox.google.com/

在此先感謝。

我編輯了這則訊息代碼

<md-button ng-click="toggle = !toggle"> 
    toggle 
</md-button> 
<div class="container" layout="row" flex> 
    <md-sidenav md-is-locked-open="$mdMedia('gt-sm')" class="md-whiteframe-4dp" flex md-component-id="left"> 
     <md-list flex> 
      <md-subheader class="md-no-sticky">Tapplent Team</md-subheader> 
      <md-list-item class="md-3-line" ng-repeat="user in users" ng-click="setSelectedUser(user)"> 
       <img ng-src="{{user.avatar}}" class="md-avatar" alt="{{item.who}}" ng-show="toggle"/> 
       <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1" ng-hide="toggle"> 
        Checkbox 1: {{ data.cb1 }} 
       </md-checkbox> 
       <div class="md-list-item-text" layout="column"> 
       <h3>{{ user.name }}</h3> 
       <h4>{{user.designation}}</h4> 
       <p>{{user.technology}}</p> 
       </div> 
      </md-list-item> 
     </md-list> 
    </md-sidenav> 
</div>

只是爲了測試我用按鈕切換，基本上是隱藏和顯示或者頭像和複選框做。

來源

2016-04-28 Naushad Ahmad

有在各列表項的同一個地方一個複選框和頭像。使用CSS懸停來隱藏頭像，並在用戶懸停在頭像上時顯示覆選框。 – Jaydo

如果所選項目的數量大於0，則使用'ng-class'隱藏化身。 – Jaydo

感謝您的回覆。還有一件事是缺少的要求，在懸停的化身只有這個化身應該變成一個複選框，當我選擇這個複選框，那麼所有的化身應該改變成多選擇的複選框 –

要隱藏化身並顯示懸停時的複選框，您可以使用CSS。將圖像和複選框包裝在一個div中，並給它一個類，如「avatarWrapper」。

md-checkbox { 
    display: none; /* Initially hide the checkbox */ 
} 

/* When we hover over the wrapper, hide the avatar */ 
.avatarWrapper:hover > img.md-avatar { 
    display: none; 
} 

/* When we hover over the wrapper, show the checkbox */ 
.avatarWrapper:hover > md-checkbox { 
    display: inline-block; 
}

要隱藏所有的化身，並顯示該複選框，當至少一個複選框被選中，你可以使用ng-class添加CSS類會隱藏/顯示相應的元素。

HTML：ng-class將添加類「atLeastOneSelected」如果atLeastOneSelected()返回true。

我已將它添加到列表中，而不是添加到ng-repeat中的一個元素，因爲無需爲每個重複元素檢查一次。

<md-list flex ng-class="{'atLeastOneSelected': atLeastOneSelected()}">

JS：您沒有提供您的數據或數據結構，所以我做了一些。我已將複選框與ng-model綁定到user.selected。

$scope.users = [ 
    { 
    avatar: "https://cdn1.iconfinder.com/data/icons/user-pictures/101/malecostume-512.png", 
    name: "Matt", 
    selected: false 
    }, 
    { 
    avatar: "https://cdn1.iconfinder.com/data/icons/user-pictures/101/malecostume-512.png", 
    name: "David", 
    selected: false 
    }, 
    { 
    avatar: "https://cdn1.iconfinder.com/data/icons/user-pictures/101/malecostume-512.png", 
    name: "Tom", 
    selected: false 
    } 
];

用於檢查是否至少選擇一個用戶的功能。返回true/false。

$scope.atLeastOneSelected = function() { 
    $scope.users.some(function(user) { 
    return user.selected === true; 
    }); 
};

CSS：

.atLeastOneSelected img.md-avatar { 
    display: none; 
} 

.atLeastOneSelected md-checkbox { 
    display: inline-block; 
}

Codepen

來源

2016-05-03 23:01:33 Jaydo

在列表視圖的頭像懸停時，它應該變爲複選框

回答

相關問題