CODEWITHSUNDEEP
angularjsvariablesscopebind
user1491636
user1491636

Reputation: 2446

angular scope variable not binding

I have an angular view with a dynamic dropdown. When the user selects one of the options in the list I am trying to set a scope variable. For whatever reason it is not set upon selection. I assume it's an issue with the scope, but I can't figure out what exactly.

app.controller('MyController', function ($scope) {   
    $scope.myType = null;   
    $scope.types = [{name: 'a', isChecked:false}, {name: 'b', isChecked:false}, {name: 'c', isChecked:false}];  
    $scope.doSomething = function() {
       console.log($scope.myType); //null value
    }
}

The view builds the dropdown from the types scope variable. When the user selects one, I set myType to the name value of the selection, but when I try to reference that variable within the controller, its always null.

<div class="btn-group" dropdown>
    <button type="button" dropdown-toggle>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">  
        <li ng-repeat="type in types" ng-click="myType = type.name">
            {{type.name}} <input type="checkbox" ng-checked="myType == type.name" /><label></label>
        </li>
    </ul>
</div>

<div ng-click="doSomething()">do something</div>

Upvotes: 1

Views: 3214

Answers (3)

nitin
nitin

Reputation: 156

no need to make setType a function, you button is out of the ng-repeat directive and which result it is not able to bound the scope if you try your div button with in the

  • tag some where down li, it will work. else every thing looks fine. some thing like this,

    <li ng-repeat="type in types" ng-click="myType = type.name">
        {{type.name}} <input type="checkbox" ng-checked="myType == type.name" /><label></label>

 <a href = '' ng-click=doSomething(myType) />Submit
</li>

    :)

    Upvotes: 0

    • Davin Tryon
    Davin Tryon

    Reputation: 67326

    I think that this is a problem of inherited scopes. For every iteration of ng-repeat a new scope is created. That means that myType will be created inside each ng-repeat scope (and not on your controller scope). So, when you are setting myType, you are not referring to the controller's myType.

    To get around this either use dot syntax:

    js:

    app.controller('MyController', function ($scope) {   
    $scope.selected = { myType: null };   
    $scope.types = [{name: 'a', isChecked:false}, {name: 'b', isChecked:false}, {name: 'c', isChecked:false}];  
    $scope.doSomething = function() {
       console.log($scope.myType); //null value
    }
}

    html: 

    <div class="btn-group" dropdown>
    <button type="button" dropdown-toggle>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">  
        <li ng-repeat="type in types" ng-click="selected.myType = type.name">
            {{type.name}} <input type="checkbox" ng-checked="selected.myType == type.name" /><label></label>
        </li>
    </ul>
</div>

    Or use $parent:

    <div class="btn-group" dropdown>
    <button type="button" dropdown-toggle>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">  
        <li ng-repeat="type in types" ng-click="$parent.myType = type.name">
            {{type.name}} <input type="checkbox" ng-checked="$parent.myType == type.name" /><label></label>
        </li>
    </ul>
</div>

    Upvotes: 1

    Alex Zai
    Alex Zai

    Reputation: 119

    Make the ng-click event a function:

    $scope.setType() {
  $scope.myType = $scope.type.name;
}


<li ng-repeat="type in types" ng-click="setType()">
    {{type.name}} <input type="checkbox" ng-checked="myType == type.name" /><label></label>
</li>

    Upvotes: 0

    Related Questions