Opt for conventional inputs when incorporating Angular Material checkboxes

Question

Opt for conventional inputs when incorporating Angular Material checkboxes

Is it possible to use the normal input checkbox in .NET forms, or do I need to create a custom directive or modify the existing one to make it work?

<md-checkbox ng-checked="$ctrl.checked = !$ctrl.checked">
    <input type="checkbox" name="test" value="1" />
</md-checkbox>

I could add the ng-checked attribute to the input element as well, but it seems unnecessary. I would expect that simply adding a name attribute would automatically include a hidden checkbox with a truthy value and toggle the nested checkbox.

javascript angularjs checkbox angular-material

Answer 1

Answer №1

var myApp = angular.module('myApp', ['ngMaterial']);
myApp.controller('mainCtrl', function() {});

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.js"></script>

<div ng-app="myApp" ng-cloak>
  <div ng-controller="mainCtrl">
    <md-switch ng-model="switch" aria-label="Switch 1">
      Toggle checkbox
    </md-switch>
    <input id="checkSlave" type="checkbox" ng-checked="switch">
    Normally, this checkbox would be hidden
  </div>
</div>

Answer 2

var myApp = angular.module('myApp', ['ngMaterial']);
myApp.controller('mainCtrl', function() {});

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.js"></script>

<div ng-app="myApp" ng-cloak>
  <div ng-controller="mainCtrl">
    <md-switch ng-model="switch" aria-label="Switch 1">
      Toggle checkbox
    </md-switch>
    <input id="checkSlave" type="checkbox" ng-checked="switch">
    Normally, this checkbox would be hidden
  </div>
</div>

Opt for conventional inputs when incorporating Angular Material checkboxes

Answer №1

Similar questions

The specified type '{ state: any; dispatch: React.Dispatch<{ type: string; value: any; }>; }' is not compatible with the expected type

The filter function in JavaScript's Array is malfunctioning on Internet Explorer version 7

Setting up web pack with flag-icon-css integration

Enable lodash access throughout a React Native application

Using the prop callback in a React test renderer does not trigger updates in hooks

What prevents certain scenarios from being encapsulated within a try/catch block?

My goal is to use both jQuery and PHP to automatically populate the dropdown list

Switch the values between two TextFields using Reactjs with material-ui

What is the best way to incorporate a N/A button into the dateRangeFilter located in the header of a webix dataTable, enabling the exclusion of N/A values within that specific column?

Visual Studio Code encounters a Node.js error stating "Module not found"

Using Javascript to dynamically change the background image url in CSS

How do I extract a parameter when passing it to a promise in NodeJS?

Strategies for ensuring completion of internal promises

Having trouble initiating an AJAX request

Generate the maximum capacity 3D box that can be inscribed within a set of points

Is there a way to refresh a div when the page loads?

How can I transfer information from jQuery.ajax() to an angular controller?

Child component not inheriting Angular Material styles

Is there a way to access the name of a generic type T class in TypeScript?

What is the best way to show static files from the backend in a React application?