$scope var not propagating in child

Question

In a list of items, clicking an item opens up an input field using ng-show="showInput=true" .

 <div ng-app="myApp" ng-controller="Ctrl">
 <li  ng-click="showInput=true" ng-repeat="label in labels">{{label}} - ---> show       input = {{showInput}}
   <form  ng-show="showInput" >
   <input type=text value={{label}}><button ng-click="saveDate()">save</button>
   </form>
 </li> 
 </div>

However, when clicking on save , setting showInput=false the form is not hiding:

 angular.module('myApp', [])
 .controller('Ctrl', ['$scope', function($scope) {
    $scope.labels=["click a", "click b", "click c", "click d", "click e"];
    $scope.showInput = false;

    $scope.saveData = function(){           
        $scope.showInput = false;
    }
  }]);

I suspect this is a parent / child scope issue. Can anyone point out how to make this work?

Fiddle: http://jsfiddle.net/supercobra/PUZzZ/

Answer 1

You have a few bugs here.

1. In your HTML you should write saveData() (not saveDate()).

2. When you click any element inside your li (including your button) , it will set your showInput at true.

3. You are dealing with a pure JavaScript object within the scope. There is a question specificlly asking what to do with this at an AngularJS Meetup you can see here . The best solution seems to use an object so the child and the parent use the same referenced object. Here is how I've done it (using a key system instead of the label would be safer tho)

Look at this fiddle for my solution.

<div ng-app="myApp" ng-controller="Ctrl">
    <li ng-repeat="label in labels">
        <span ng-click="showInput[label] = true">{{label}}</span> - ---> show input = {{showInput}}
        <form  ng-show="showInput[label]" >
        <input type=text value={{label}}><button ng-click="saveData(label)">save</button>
        </form>
    </li> 
</div>


angular.module('myApp', [])
    .controller('Ctrl', ['$scope', function($scope) {
        $scope.labels=["click a", "click b", "click c", "click d", "click e"];
        $scope.showInput = {};

        $scope.saveData = function(label){           
            $scope.showInput[label] = false;
        }
    }]);

This work perfectly. The problem is if you use a $scope variable inside a child, the parent will not be able to access it when you save.

Answer 2

The problem is indeed that ng-repeat creates its own scope and that you override your showInput .

What I usually do in this situation is to keep track of those forms which are currently shown and implement a toggle like method, like shown in this fiddle . This keeps track of the opened form within the controller and not the $scope object, which only provides methods (to all child scopes, such as that of ng-repeat) to access the private information.

You also have a typo in the call to saveData , but that is not the problem.

Answer 3

Yo have given <button ng-click="saveDate()"> in your view and in your controller you call the function as $scope.saveData . Typo error. change $scope.saveData to $scope.saveDate

Answer 4

why dont you try something like:

ng-click="showInput = false">

sometime using ng-click inside form doesnot work the way you want. u can try with input type='submit' also that makes your work much easier.