Designing Checkbox features with Bootstrap Glyphicons

I have successfully created a set of bootstrap icons functioning as radio buttons. Now, I am trying to achieve a similar effect with checkboxes, allowing users to select and store multiple options. I am struggling to figure out the best approach to implement this.

HTML

<h1>AUTOMATIC TASKS
  <ul class="nav nav-pills nav-stacked user-dems">
    <li ng-repeat="optionText in type.options" class="underline"><a href="#" ng-click="selectType(optionText)" class="queue-type queue-text-margin"><span ng-class="{&quot;glyphicon-ok&quot;:type.selected===optionText,&quot;glyphicon-unchecked&quot;:type.selected!==optionText}" class="glyphicon glyphicon-ok queue-box-padding"></span>{{optionText}}</a></li>
  </ul>
</h1>

Controller

angular.module('app').controller('mvQueueListCtrl', function($scope, mvQueue) {

 ........
 ........

  $scope.selectType = function(opt){
      $scope.type.selected = opt

  },


  $scope.type = {
      options: ['Fax', 'Physical', 'Digital'],
      //selected: 'None'
      selected: 'Fax'
    },


 ..........
 ..........
 ..........

}
);

Answer №1

To enhance the functionality of your view model, consider changing the structure from an array of primitives to an array of objects:

$scope.type = {
   options: [{name:'Fax', selected:true},
         {name:'Physical', selected:false}, 
         {name:'Digital', selected:false}],
};

Then, make adjustments to your handler to toggle the selection:

 $scope.selectType = function(opt){
      opt.selected = !opt.selected;
  };

Modify your ng-repeat as follows:

  • Pass option on click ng-click="selectType(option)"
  • Update ng-class to
    ng-class="{'true' : 'glyphicon-ok', false:'glyphicon-unchecked'}[option.selected]"

<li ng-repeat="option in type.options track by $index">
      <a href="#" ng-click="selectType(option)" class="queue-type queue-text-margin">
        <span ng-class="{'true' : 'glyphicon-ok', false:'glyphicon-unchecked'}[option.selected]" 
         class="glyphicon glyphicon-ok queue-box-padding"></span>{{option.name}}
      </a>
</li>

Live Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to send checkbox values to ActionResult in MVC5?

I am working on an MVC5 application and within my view, I have the following code snippet: <div class="form-group"> @Html.LabelFor(model => model.CategoryID, "Category", htmlAttributes: new { @class = "control-label col-md-3" }) <div c ...

TypeScript interface with an optional parameter that is treated as a required parameter

Within my interface, I have a property that can be optional. In the constructor, I set default values for this property, which are then overridden by values passed in as the first parameter. If no properties are set, the defaults are used. I am looking fo ...

The error message "Cannot call expressjs listen on socket.ip" indicates that there

Currently working on a project involving websockets, but encountering an error in the code below: TypeError: require(...).listen is not a function Here's what I have tried so far: const app = require("express")(); const port = 3800; const ...

What are the benefits of reverting back to an Angular 1 directive instead of using an Angular 2 application

Our team has created numerous Angular 1 components and is eager to incorporate them into our Angular 2 application. However, the documentation suggests that we must downgrade the Angular 2 application in order to integrate and utilize the Angular 1 direc ...

The issue I am encountering is that the value from jQuery autocomplete is not getting transferred to the

I'm having trouble retrieving a textInput from a Form where I am extracting values from Jquery Autocomplete. The selected value is not being transferred to the form. Can you please help me identify what I am missing? $(function() { var availableT ...

What are some strategies for safeguarding a disabled button?

Is there a way to securely disable a button if the user does not have permission to access it? I currently disable it at the Page_Load event: Page_Load() { if(!userhasrights) { btn.Enabled=false; } } However, after rendering, ASP.N ...

Checking for null values using the "and/or" syntax

While reading an article on special events in jQuery, I came across a syntax that was unfamiliar to me: var threshold = data && data.threshold || 1 I have previously encountered the following: var threshold = data.threshold || 1 As far as I kno ...

There was an issue encountered while attempting to add concurrently to the package.json

Bundle of scripts in package.json "scripts": { "begin": "node back-end/server.js", "serve": "nodemon back-end/server.js", "client-initiate": "npm start --prefix front-end", ...

Aligning a DIV using javascript

Hey everyone, I'm encountering an issue with the JavaScript on my website. I'm struggling to center the div in order to properly display the image I click on. It seems to work fine on the second attempt, but on initial click, the div always appea ...

The combination of Javascript and CSS allows for interactive and visually

I'm currently working on a project where I had to create a simulated weather page using only Javascript. However, I am struggling with the overall layout and have a few questions that I hope someone can help me with: Despite trying various methods ...

Guide on loading numerous JavaScript files into a database using the mongo shell

I am faced with the task of loading multiple js files that contain collections creations and seeds into my database using the mongo command. Currently, I have been manually loading data from each file one by one like so: mongo <host>:<port>/< ...

I am puzzled by the Policy Violation notification I received, especially since I have been in compliance with API Level 33 regulations since August 25, 202

Hey there! I'm wondering why Google Play Console has flagged me for violating policy on API Level 33. This issue started on August 25, 2023 with version 7.0.4 currently in production. I made changes to the config XML file. Just so you know, this was ...

Is there a way to upload files in AngularJS without using AJAX or jQuery?

Currently, I am looking to create a gallery that allows for the uploading of multiple images. While I have come across some options that utilize ajax to immediately send the files, I prefer a solution that involves form submission. In addition, I would li ...

Govern Your Gateway with Expressive Logs

I'm facing some issues with the logs in my Express Gateway: Although I followed the documentation and enabled Express Gateway logs, I cannot locate any log files under my gateway root directory. Whenever I start the gateway using the command LOG_L ...

Chrome autocomplete behaves as if the input fields are disabled and cannot be clicked on

I am experiencing an unusual issue with autofill in Chrome. After logging in and then logging out of the app, the input fields (email, password) are auto-filled but appear to be frozen and unclickable. This problem does not occur every time; it only happe ...

Customize your Vue 3 application with custom Axios functions for handling GET, PUT,

I am looking to enhance my use of axios by customizing the get, post, and put functions. After performing the axios.create() operation, I want every subsequent get operation to include a then and catch block. import axios from "axios"; export de ...

Troubleshooting the "@material-ui/core" issue in React: Step-by-step guide

Issue with React: Unable to locate the '@material-ui/core' module in 'C:\Users\user\Downloads\inTech'22-Web Development (EDUGEN)\edu-gen\src\components' Resolution Command: To resolve, run npm in ...

The assignment of object properties seems to be failing in the outcome produced by Mongoose

After running a mongoose find query and storing the result in an object, I attempted to add a total coin value to each object by using the exec operation. However, when I printed the object on the console, it seemed that the value was not being assigned an ...

Concealing table columns using JavaScript - adapt layout on the fly

I am currently implementing a responsive design feature on my website, where I need to hide certain columns of a table when the viewport size decreases beyond a specific point. Initially, I tried using .style.visibility = "collapse" for all <tr> elem ...

Using jQuery to enable scrolling and dynamically changing classes

I'm currently working on enhancing my website with a feature that changes the opacity of the first section to 0.4 when a user scrolls more than 400 pixels down the page. I attempted the following code without success: if($("html, body").offset().top ...