CODEWITHSUNDEEP
javascriptangularjscheckboxangularjs-ng-model
eagle
eagle

Reputation: 461

How to use ng-model with checkbox value?

I want to this :

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

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.

Upvotes: 3

Views: 6589

Answers (2)

Thibault Friedrich
Thibault Friedrich

Reputation: 185

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

Upvotes: 1

Silvinus
Silvinus

Reputation: 1445

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

Upvotes: 1

Related Questions