$ scope var不在child中傳播

Question

在項目列表中，單擊項目將使用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>

但是，單擊“ save ，設置showInput=false表單未隱藏：

 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;
    }
  }]);

我懷疑這是父/子范圍問題。 任何人都可以指出如何使這項工作？

小提琴： http ： //jsfiddle.net/supercobra/PUZzZ/

Answer 1

你有一些錯誤。

1. 在你的HTML中你應該寫saveData（）（而不是saveDate（））。

2. 單擊li中的任何元素（包括按鈕）時 ，它會將showInput設置為true。

3. 您正在處理范圍內的純JavaScript對象。 在AngularJS Meetup中有一個問題，具體問一下如何處理這個問題， 你可以在這里看到 。 最好的解決方案似乎使用一個對象，因此子和父對象使用相同的引用對象。 這就是我如何做到的（使用關鍵系統代替標簽會比較安全）

看看這個小提琴我的解決方案。

<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;
        }
    }]);

這工作完美。 問題是如果在子項中使用$ scope變量，則父項在保存時將無法訪問它。

Answer 2

問題確實是ng-repeat創建了自己的范圍，並且您覆蓋了showInput 。

在這種情況下我通常做的是跟蹤當前顯示的那些形式並實現類似toggle的方法， 如此小提琴中所示。 這將跟蹤控制器中打開的表單，而不是$scope對象，后者僅提供訪問私有信息的方法（對所有子范圍，例如ng-repeat的范圍）。

你在saveData的調用中也有一個拼寫錯誤，但這不是問題。

Answer 3

你已經在你的視圖中給出了<button ng-click="saveDate()"> ，你在控制器中將這個函數稱為$scope.saveData 。 錯字錯誤。 將$scope.saveData更改$scope.saveData $scope.saveDate

Answer 4

為什么你不嘗試這樣的事情：

ng-click =“showInput = false”>

有時在表單內使用ng-click並不能按照你想要的方式工作。 你可以嘗試輸入type ='submit'也可以讓你的工作更容易。