Angularjs -让按钮像复选框一样

Angularjs - Making a button behave like a checkbox

本文关键字：一样 复选框 按钮 Angularjs      更新时间：2023-09-26

我试图让ngstyle为用户提供一个简单的界面列表视图，并且遇到了一个问题，有人可以帮助解决。

我试图使用ngstyle和ngmodel来改变样式和隐藏图标，当一个按钮被点击，理想情况下，我想要一个按钮，允许你切换列表和平铺视图模式。

这是当前的复选框系统(它很笨拙，不友好，但可以工作)。

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

下面是我对图标所做的，这样当选中图标时它们就会隐藏起来:

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

我需要的是最好是一个按钮，即"更改视图"，它完成了我在这里实现的相同任务，但更容易。

任何帮助或建议都将是非常感激的。

提前致谢

你可以直接使用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中的表达式如果为真将显示按钮，如果为假将隐藏按钮。您可以在每个按钮标签中使用相同的表达式，只需使用!

反转表达式即可。

在Javascript中，您可以使用changeView()

将表达式切换到/from true

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

最终使用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>

相关文章：