How to use ng-model with checkbox value?

Question

I want to this :

Summary Row should be checked/unchecked for datetime and object at once as well as separately. my display like photo :

I use ng-model. my checkbox code as the following :

 <div class='ui-widget-header ui-corner-all pw-chart-header' style="padding-left:12px ">
                                            <input type="checkbox" value="3" style="vertical-align: middle; margin: 0" id="selectsummarizationType" ng-model="summarizationtypeBoth" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false" class="ng-pristine ng-untouched ng-valid"> Summary Row
                                        </div>


      <div style="padding-top:10px ; padding-bottom:10px; padding-left:10px ; padding-right:10px">
                                                   <label for="uxDatetime">
                                                     <input type="checkbox" value="1" style="vertical-align: middle; margin: 0" id="uxDatetime" name="uxDatetime" ng-model="summarizationtypeDate" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false" class="ng-pristine ng-untouched ng-valid"> Datetime
                                                   </label>
                                                   <label for="uxObject" style="float: right">
                                                     <input type="checkbox" value="2" style="vertical-align: middle; margin: 0" id="uxObject"  name="uxObject" ng-model="summarizationtypeObject" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false" class="ng-pristine ng-untouched ng-valid"> Object
                                                   </label>
                                                </div>

and this is ng-model (js) code :

$scope.$watch('summarizationtypeBoth', function () {

                });
                $scope.$watch('summarizationtypeDate', function () {

                });
                $scope.$watch('summarizationtypeObject', function () {

                });

how can I use ng-model so How do I write ? Please.

if i understood your problem check this plunker plnkr.co/edit/wYmWXnu5Ld2SmUdGayfd?p=preview — santhosh
– santhosh, Commented May 13, 2016 at 5:55
I think this help me but How can I do : put ng-change on summary input and set the other two.By the way Thank you for your answer @YOU — eagle
– eagle, Commented May 13, 2016 at 6:00

Silvinus · Accepted Answer · 2016-05-13 06:03:53Z

1

Us ng-change property :

<input type="checkbox" value="3" style="vertical-align: middle; margin: 0" id="selectsummarizationType" ng-model="summarizationtypeBoth" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false" class="ng-pristine ng-untouched ng-valid" ng-change="summaryChecked()"> Summary Row

and in your controller

$scope.summaryChecked = function() { 
   $scope.summarizationtypeDate = $scope.summarizationtypeBoth
   $scope.summarizationtypeObject= $scope.summarizationtypeBoth
}

See this plunker https://plnkr.co/edit/ztL4nC6JYDv1lpnuMr4s?p=preview

edited May 13, 2016 at 6:03

answered May 13, 2016 at 5:58

Silvinus

1,4459 silver badges16 bronze badges

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

6 Comments

eagle Over a year ago

I did but nothing to do. maybe this cause: my ng-models are empty ? @Silvinus

Silvinus Over a year ago

In this case, add this after your your input : {{summarizationtypeBoth}} - {{summarizationtypeDate}} - {{summarizationtypeObject}} abd check when you check first the value of summarizationtypeBoth change.

eagle Over a year ago

I dont understand. What do you mean ? @Silvinus

Silvinus Over a year ago

Just add in your hml page '{{summarizationtypeBoth}} - {{summarizationtypeDate}} - {{summarizationtypeObject}}'. This will be displayed the value of this scope properties. Is just to check if your properties are correctly bind on scope

eagle Over a year ago

when i check summarizationtypeBoth Output : true - true - true . @Silvinus

|

Community · Accepted Answer · 2017-05-23 11:59:49Z

1

Try to avoid $scope.$watch as much as possible because it may slow your web application.

You should use an object with the 3 values and using getters and setters to ensure your conditions. There is an exemple here :Conditional ng-model binding in angularjs

With ng-model-options, you can force to call your setters : https://docs.angularjs.org/api/ng/directive/ngModelOptions

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered May 13, 2016 at 6:05

Thibault Friedrich

1852 silver badges12 bronze badges

1 Comment

eagle Over a year ago

I am working learn angularjs so I am new this stuff. so I'm not sure how the code may cast. Can you make examples out of question @Thibault Friedrich

Collectives™ on Stack Overflow

How to use ng-model with checkbox value?

2 Answers 2

6 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Linked

Related