7

I am assuming a scope problem is the reason the input in this example can modify the value next to it, but not the other value. If this is the case, how do I hook up the model to right scope? If it isn't a scope problem, what am I doing wrong?

<html ng-app>
    <head>
        <script type="text/javascript" src="angular-1.0.1.min.js"></script>
        <script type="text/javascript">
            function ExampleCtrl($scope) {
                $scope.list = [
                    { name: "a" },
                    { name: "b" },
                ];

                $scope.value = 5;
            }
        </script>
    </head>
    <body ng-controller="ExampleCtrl">
        <ul ng-repeat="item in list">
            <li>{{ item.name }}
                <ng-switch on="item.name">
                    <span ng-switch-when="b">
                        <input type="number" ng-model="value" />
                        {{ value }}
                    </span>
                </ng-switch>
            </li>
        </ul>

        value is {{ value }}
    </body>
</html>
Chas. Owens
  • 64,182
  • 22
  • 135
  • 226

2 Answers2

7

Another way - you can access parent scope using $parent.

<input type="number" ng-model="$parent.$parent.value" />

See example: http://jsfiddle.net/7Hh2R/

Artem Andreev
  • 19,942
  • 5
  • 43
  • 42
  • 1
    By the way, where is `$parent` documented? I can't seem to find it one the website. – Chas. Owens Aug 09 '12 at 13:39
  • @Chas.Owens I can't find documentation on $parent. I know it from mailing list. It is defined [here](https://github.com/angular/angular.js/blob/54e4a6ffbf9de21d33bc9f770db93677590d148a/src/ng/rootScope.js#L197). And I know at least one more undocumented thing - [ngValue directive](https://github.com/angular/angular.js/blob/f16150d5f1b20b3d633b4402095ea89baa4be042/src/ng/directive/input.js#L1235) – Artem Andreev Aug 09 '12 at 16:38
  • Actually, using $parent is kind of hack. I advice you to introduce model object (kind of ```$scope.editngItem = { value: '' };``` and reference field of that model object: ``ng-model='editingItem.value'```. This is more nicer way. – Valentyn Shybanov Jun 14 '13 at 15:21
  • Documentation states: "This directive creates new scope". For a newbie its not clear what the implications of this are. But this answer certainly helps. – Al Polden Feb 07 '14 at 16:12
5

You're right both ngRepeat and ngSwitch create different scopes. You can use the awesome AngularJS Batarang developer tool for Chrome to see the different scopes in action.

One change you can make to reference the same value in your code is to reference an object property instead of a primitive type like:

$scope.value = { val: 5 };

and bind to:

<input type="number" ng-model="value.val"/>
{{ value.val }}

I'll be interested to see if there are better ways to handle this with the different scopes.

Gloopy
  • 37,767
  • 15
  • 103
  • 71