Question

我试图让ngstyle轻松地为用户提供一个列表视图，并遇到了某个人可以提供帮助的问题。

我正在尝试使用ngstyle和ngmodel来改变样式并在单击按钮时隐藏图标，理想情况下我想要一个允许您在列表和平铺视图模式之间切换的按钮。

这是现在的复选框系统（它很笨重，不是用户友好，但有效）。

＆＃13;

    <p style="color:black; font-size:14px; margin-left:50px;" class="label">List View
      <input type="checkbox" ng-model="visible" aria-label="Toggle ngShow" style="margin-left:5px;" ng-click="myStyle={width:'100%', height:'30px', 'text-align':'left', top:'7px', 'font-size':'14px'}">
    </p>
    <p style="color:black; font-size:14px;" class="label">Tile View
      <input type="button" ng-model="unchecked" aria-label="Toggle ngShow" style="margin-left:5px;" ng-click="myStyle={}">
    </p>

＆＃13;

以下是我对图标所做的事情，以便在检查时隐藏：

＆＃13;

  .hideItem {
    visibility: hidden;
  }

＆＃13;

<i ng-class="{'hideItem': visible}" class="icon fa fa-bookmark-o"></i>

＆＃13;

我需要的是优选的单个按钮，即“更改视图”＃34;它完成了同样的任务我在这里实现但更容易。

非常感谢任何帮助或想法。

提前谢谢

Answer 1

您可以直接使用ng-show，因为它是Angular内置的指令，用于在两个按钮之间切换状态 - 平铺视图按钮和列表视图按钮。显示的那个可以通过表达式

切换

<button type="button" ng-model="unchecked" ng-show="expression" ng-click="changeView()">List View</button>
<button type="button" ng-model="unchecked" ng-show="expression" ng-click="changeView()">Title View</button>

ng-show中的表达式如果truthy将显示按钮，如果falsy将隐藏按钮。您可以在每个按钮标记中使用相同的表达式，只需使用！

反转表达式

在Javascript中，您可以使用changeView（）

将表达式切换为truthy

以下是ng-show文档的链接： https://docs.angularjs.org/api/ng/directive/ngShow

Answer 2

使用ng-class结束如下：

<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav" class="dropdown-menu">
      <li role="menuitem"><a ng-click="tog=1" style="text-transform: initial;" uib-tooltip="New List View" ng-model="tileView">List View</a>
        <!--a(ng-click="myStyle={width:'100%', height:'30px', 'text-align':'left', top:'5px', 'font-size':'14px', 'margin-left':'5px',}" style="text-transform: initial;", uib-tooltip="New List View", ng-model="listView") List View-->
      </li>
      <li role="menuitem"><a ng-click="tog=2" style="text-transform: initial;" uib-tooltip="Original Tiled View" ng-model="tileView">Tile View</a></li>
    </ul>

使用以下内容绑定它：

<a uib-tooltip="{{item.Title}}" ng-repeat="item in linkList = (WorkspaceCtrl.workspaceLinkStore.list | filter:{Active:true} | limitTo:WorkspaceCtrl.itemsPerCategory)" ng-href="{{item.Url}}" target="_blank" ng-class="{items:tog==1}" class="item">
<p class="title">{{item.Title}}</p></a>

Angularjs - 使按钮表现得像一个复选框

2 个答案: