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 https://plnkr.co/edit/wYmWXnu5Ld2SmUdGayfd?p=preview — santhosh, May 13 '16 at 05: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, May 13 '16 at 06:00

Silvinus · Accepted Answer · 2016-05-13T06:03:53.627

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 '16 at 06:03

answered May 13 '16 at 05:58

Silvinus

1,445
8
16

I did but nothing to do. maybe this cause: my ng-models are empty ? @Silvinus – eagle May 13 '16 at 06:34
In this case, add this after your your input : {{summarizationtypeBoth}} - {{summarizationtypeDate}} - {{summarizationtypeObject}} abd check when you check first the value of summarizationtypeBoth change. – Silvinus May 13 '16 at 06:47
I dont understand. What do you mean ? @Silvinus – eagle May 13 '16 at 06:57
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 – Silvinus May 13 '16 at 07:04
when i check summarizationtypeBoth Output : true - true - true . @Silvinus – eagle May 13 '16 at 07:08
And your checkbox are checked ? And what is your output when you uncheck summarizationtypeBoth ? – Silvinus May 13 '16 at 07:10

score 1 · Answer 2 · edited May 23 '17 at 11:59

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 '17 at 11:59

Community

1
1

answered May 13 '16 at 06:05

Thibault Friedrich

127
2
9

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 – eagle May 13 '16 at 06:21

How to use ng-model with checkbox value?

2 Answers2