Angular 1: Change md-checkbox depending on input checkbox

Question

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>

can you post what you have tried in your controller? or directive? — Abdullah Rasheed
– Abdullah Rasheed, Commented Mar 31, 2016 at 9:50
@inspired here is whole controller for this partial i.imgur.com/5QYXI57.png (had to screenshot it, wouldn't be readable inside a comment) — Kunok
– Kunok, Commented Mar 31, 2016 at 9:55

Rishab777 · Accepted Answer · 2016-03-31 13:19:26Z

1

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.

answered Mar 31, 2016 at 13:19

Rishab777

5656 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdullah Rasheed · Accepted Answer · 2016-03-31 12:34:13Z

0

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.

answered Mar 31, 2016 at 12:34

Abdullah Rasheed

3,7524 gold badges35 silver badges51 bronze badges

Collectives™ on Stack Overflow

Angular 1: Change md-checkbox depending on input checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related