ozscience ozscience - 1 year ago 75
AngularJS Question

Angularjs - Making a button behave like a checkbox

Im trying to make ngstyle give an interface a list view for the users easily and have encountered an issue someone may be able to assist with.

I am trying to use ngstyle and ngmodel to both alter the style and hide icons when a button is clicked, ideally I would like a button that allow you to switch between list and tile view modes.

Here is the checkbox system as it stands (which is clunky and not user friendly, but works).

<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 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={}">

And here is what ive done to the icons so they hide when checked:

.hideItem {
visibility: hidden;

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

What I need is for preferably a single button that is "Change View" which accomplishes the same task Im achieving here but easier.

Any assistance or ideas would be greatly appreciated.

Mant thanks in advance

Answer Source

Ended up using ng-class as below:

<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 role="menuitem"><a ng-click="tog=2" style="text-transform: initial;" uib-tooltip="Original Tiled View" ng-model="tileView">Tile View</a></li>

And bound it using the following:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download