How to Bind Dynamic Check Boxes Value Using Ng-Model

How to bind dynamic Check boxes value using ng-model?

You have to bind each input to a different value. Currently all of them are bound to the field operations in the scope via ng-model="operations".

I suggest you create an array operations in your controller like this:

$scope.operations = new Array($scope.operations_publish.length);

Then you can bind the checkboxes to the respective index in this array:

<span ng-repeat="operation in operations_publish">
    <input type="checkbox"
           name="operations"
           ng-model="operations[$index]"
           value="{{operation}}"/>
    {{operation}}
</span>

This will give you an array with true at all checked indexes. If you then want the selected values as strings in an array, you can collect them like this:

function getSelected() {
    return $scope.operations_publish.filter(function (x,i) {
        return $scope.operations[i]
    });
}

Check this fiddle for the complete code.

Binding ngModel to Dynamic Checkbox List : Angular 2 / Typescript

Based on НЛО answer above I was able to figure out the solution to my question. Thank you НЛО.

<div class="form-group">
    <label for="timeslots">Select Timeslots Available for Rent *</label>
    <div *ngIf="dbtimeslots">
        <span *ngFor="let timeslot of dbtimeslots" class="checkbox">
            <label>
                <input type="checkbox" value="{{timeslot.id}}" name="{{timeslot.id}}"  [checked]="(facility.timeslotids && (-1 !== facility.timeslotids.indexOf(timeslot.id)) ? 'checked' : '')" (change) ="updateSelectedTimeslots($event)" />{{timeslot.timeslotname}}
            </label>
         </span>
    </div>
</div>

Then the function on the component:

updateSelectedTimeslots(event) {
    if (event.target.checked) {
          if (this.facility.timeslotids.indexOf(parseInt(event.target.name)) < 0) { 
                this.facility.timeslotids.push(parseInt(event.target.name));

          }
     } else {
           if (this.facility.timeslotids.indexOf(parseInt(event.target.name)) > -1) 
            {
                this.facility.timeslotids.splice(this.facility.timeslotids.indexOf(parseInt(event.target.name)), 1);              
            }
    }
     //console.log("TimeslotIDs: ", this.facility.timeslotids);    
}

Binding dynamic values to ng-model of a check-box with in a ng-repeat

The ng-model attribute already expects an angular expression, so throwing in the curly braces inside that will not work, instead try something like:

<div flex class="filters" layout="row"  ng-repeat="menu in set">
    <md-checkbox  class="md-primary" ng-model="query[menu.pass]">
       {{menu.display}}
    </md-checkbox>
</div>

So now it's just setting query.batch by passing in the value of menu.pass.

DEMO: https://jsfiddle.net/qvw9bmhe/32/

Just click on the names and see the query object update.

Getting the values of dynamic checkboxes with ngModel

By ionChange function in ion-checkbox you can create a new answer array

Html

    <ion-list *ngFor="let item of data.questionnaire.item;let i = index">
        <ion-item *ngFor="let option of item.options;let j =index">
            <ion-label>{{option.value}}</ion-label>
            <ion-checkbox [(ngModel)]="option.checked" (ionChange)="updateAnswer(i,j,option.value,option.checked)"></ion-checkbox>
        </ion-item>
    </ion-list>

  {{answer | json}}

TypeScript

data: any;
  answer:any[] = [];
  constructor(public navCtrl: NavController) {
    this.data = {"questionnaire": {
        "id": "5ac5f074867d190bc471dc59",
        "name": "Diabetes Questionnaire Test",
      "item": [
        {
          "prefix": "1",
          "text": "Do you have family history of diabetes?",
          "Questiontype": "choice",
          "options": [
            {
              "value": "Yes",
              "checked": false
            },
            {
              "value": "No",
              "checked": false
            },
            {
              "value": "I Don't know",
              "checked": false
            }
          ]
        },
        {
          "prefix": "2",
          "text": "Are you hypertensive?",
          "Questiontype": "choice",
          "options": [
            {
              "value": "Yes",
              "checked": false
            },
            {
              "value": "No",
              "checked": false
            },
            {
              "value": "I Don't Know",
              "checked": false
            }
          ]
        }
      ]
    }
    };
  }

  updateAnswer(index,ansindex,value,checked){
    if(!Array.isArray(this.answer[index])){
      this.answer[index] = []
    }
    if(checked){
     this.answer[index][ansindex] =  value
    }else{
      this.answer[index].splice(ansindex,1)
    }
  }

Demo

check the link https://stackblitz.com/edit/ionic-jsxle7?file=pages%2Fhome%2Fhome.ts

Anguar - using ngModel in a dynamic list of checkboxes

<mat-checkbox [(ngModel)]="row.checked" (change)="checkSelected(row)"></mat-checkbox>

You can set checked property for each row object to make it specific for each row of the table.

Using the checked of the component will occur selection of all check boxes.

Dynamic ng-model with checkbox in ng-repeat

You could first loop over permissions object with (key, value) format of ng-repeat

Markup

<div ng-repeat="(permissionName, permission) in permissions">
    {{permissionName}} |
    <label ng-repeat="(k,v) in permission">
      <input type="checkbox" ng-model="permission[k]"> {{ k }}
    </label>
    <button ng-click="updatePermission(permission)">Update</button>
</div>

Demo Plunkr

---

Related Topics