リストビューのアバターのホバリング時にチェックボックスに変わる必要があります

Question

私は問題に直面しています。 要件は次のとおりです。 私は、CISTARを持つすべてのリスト項目を含むリストビューを持っています。

私は何をしたいですか？ LIST ITEMのCIRCULAR AVATARをホバーすると、このリスト項目を選択するためのチェックボックスに変わるはずです。

また、リスト項目の複数選択で、アバターの代わりにCHECKBOXを表示する必要があります。

私のプロジェクトでは、angle-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> 

でこの記事を編集しています。

Answer 1

アバターを非表示にし、ホバーのチェックボックスを表示するには、CSSを使用できます。 divにイメージとチェックボックスをラップし、 "avatarWrapper"などのクラスを付けます。すべてのアバターを隠し、少なくとも一つのチェックボックスがチェックされたとき、あなたは適切な要素を表示/非表示になりますCSSクラスを追加するためにng-classを使用することができますチェックボックスを表示するには

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; 
} 

。

HTML：atLeastOneSelected() trueを返した場合ng-classは、クラス "atLeastOneSelected" を追加します。

繰り返し要素ごとに1回チェックする必要がないため、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 
    } 
]; 

少なくとも1人のユーザーが選択されているかどうかを確認する機能。 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