Question

我有一个要求我面临问题。要求是：我有一个列表视图，其中每个列表项目都有一个CIRCULAR AVATAR。

我想要什么？在悬停列表项目的CIRCULAR AVATAR时，它应该变为一个复选框以选择此列表项。

此外，上面和下面的所有列表项目也应该显示CHECKBOX而不是MULTI-SELECT of LIST ITEMS的头像。

我在项目中使用了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>

只是为了测试我正在做一个按钮切换，基本上隐藏并显示头像和复选框。

Answer 1

要隐藏虚拟角色并在悬停时显示复选框，您可以使用CSS。将图像和复选框包装在div中，并为其指定一个类，例如＆＃34; avatarWrapper＆＃34;。

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将添加类＆＃34; atLeastOneSelected＆＃34;如果atLeastOneSelected()返回true。

我已将其添加到列表中而不是ng-repeat中的元素，因为每个重复元素都不需要检查一次。

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

JS：您还没有提供您的数据或数据结构，所以我已经编造了一些。我已将user.selected的复选框与ng-model绑定。

$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

在悬停列表视图的头像时，它应该更改为复选框

1 个答案: