AngularJs checkbox issue single variable

Question

I'm new to angularjs v1. I want to know why I cannot assign a single variable scope into the md-checkbox. like

<md-checkbox ng-click="checkAllBox();" ng-model="chkValue" aria-label="Checkbox" style="float:left;margin-left:-4px;" class="md-primary"></md-checkbox>

;controller

$scope.chkValue = false;

which doesn't work (the $scope.chkValue didn't associate with the UI checkbox correctly). But the below is ok. May I know why?

<md-checkbox ng-click="checkAllBox();" ng-model="data.cb1" aria-label="Checkbox" style="float:left;margin-left:-4px;" class="md-primary"></md-checkbox>

;controller

$scope.data.cb1 = false;

always use a dot! stackoverflow.com/questions/18128323/… :-) — ngstschr
– ngstschr, Commented Jun 6, 2017 at 7:59

Burak Akyıldız · Accepted Answer · 2017-06-06 08:21:55Z

0

Because you are changing a variable from child scope the parent scope variable never changed.. Scope's has inheritance. You can get information from docs

Edit

To be more spesific. Controllers, some directives('ng-if', 'ng-include', vs.), isolate scopes creates its own scope.

If you want to referance a variable you need to use it with variables owner.

There is a live answer below. You can see controller has created its own scope and the parent scope cant detect changes because it has a different owner(this) now.

var app = angular.module("app",[]);
app.controller("ctrl", function($scope){
  $scope.checkData = false;
})

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body  ng-app="app"  >
    parent1:<input ng-model="checkData" type="checkbox"/>
    
      <div class="child">
        <div class="child">
          <div class="innerChild">
            inner1:<input ng-model="checkData" type="checkbox"/>
          </div>
            <div class="innerChild">
              inner2:<input ng-model="checkData" type="checkbox"/>
          </div>
        </div>
      </div>
    Controller Scope -><br>
parent2:<input ng-model="checkData" type="checkbox"/>
    <div ng-controller="ctrl" >
      <div class="child">
        <div class="child">
          <div class="innerChild">
            inner1:<input ng-model="checkData" type="checkbox"/>
          </div>
            <div class="innerChild">
              inner2:<input ng-model="checkData" type="checkbox"/>
          </div>
        </div>
      </div>
      <div class="child">
        <div class="innerChild">
          inner3:<input ng-model="checkData" type="checkbox"/>
        </div>
      </div>
    </div>
  </body>
</html>

edited Jun 6, 2017 at 8:21

answered Jun 6, 2017 at 8:01

Burak Akyıldız

1,64216 silver badges26 bronze badges

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

2 Comments

SKLTFZ Over a year ago

but why it works when i add change $scope.a to $scope.something.a ?

Burak Akyıldız Over a year ago

Because if you have referance to $scope.something.a then you can change something and the changes will be reflected but $scope.a is directly variable of $scope and if you change the a, ` $scope` must be in transclude tree.

Collectives™ on Stack Overflow

AngularJs checkbox issue single variable

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related