CODEWITHSUNDEEP
angularjs
Kunok
Kunok

Reputation: 8769

Angular 1: Change md-checkbox depending on input checkbox

How do I change check status of md-checkbox from Angular material depending on the actual checkbox check status?

Here are my checkboxes. They are inside ng-repeat. 

    <input type="checkbox" ng-checked="item.completed" ng-model="toDoItemCheckbox">
    <md-checkbox
      ng-change="toggleToDoItem({{item.createdAt}})" ng-model="toDoItemCheckbox" aria-label="todo-checkbox">
    </md-checkbox>

Upvotes: 0

Views: 842

Answers (2)

Rishab777
Rishab777

Reputation: 565

Why do you need a input type check box when you already have a md-checkbox. The checked status of md-checkbox can be changed depending on model.

<section class="white-frame-z1" ng-repeat="todo in todos">
    <md-toolbar>
      <div class="md-toolbar-tools">
        <input type="checkbox" ng-model="todo.status" ng-click="toggleTodo(todo)" />Regular Checkbox
        <md-checkbox ng-model="todo.status">
          {{todo.name}}
        </md-checkbox>
      </div>
    </md-toolbar>
  </section>

Check this Codepen for further details.

Upvotes: 1

Abdullah Rasheed
Abdullah Rasheed

Reputation: 3752

You could do so by simply using ng-modelfor two-way data binding:

<div ng-repeat="item in toDoItems">
    <input type="checkbox" ng-model="item.complete">
    <md-checkbox
      ng-change="toggleToDoItem({{item.createdAt}})" ng-model="item.complete" aria-label="todo-checkbox">
    </md-checkbox>
</div>

See this Code Pen.

Upvotes: 0

Related Questions