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

你这里有一些错误。

在你的HTML中你应该写saveData（）（而不是saveDate（））。
当您点击li （包括按钮）中的任何元素时，它会将您的showInput设置为true。
您正在处理范围内的纯JavaScript对象。有一个问题在AngularJS Meetup you can see here具体询问如何处理这个问题。最好的解决方案似乎使用一个对象，因此子和父对象使用相同的引用对象。我是这样做的（使用关键系统而不是标签会比较安全）

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

这项工作完美无缺。问题是如果你在子节点中使用$ scope变量，父节点在你保存时将无法访问它。

Answer 2

问题确实是ng-repeat创建了自己的范围并且您覆盖了showInput。

在这种情况下我通常做的是跟踪当前显示的那些表单并实现类似toggle的方法，如this fiddle中所示。这会跟踪控制器中打开的表单，而不是$scope对象，它只提供方法（对所有子范围，例如ng-repeat的范围）来访问私人信息。

您对saveData的调用也有拼写错误，但这不是问题。

Answer 3

哟已在您的视图中提供<button ng-click="saveDate()">，在您的控制器中，您将该功能称为$scope.saveData。错字错误。将$scope.saveData更改为$scope.saveDate

Answer 4

为什么不试试像：

ng-click =“showInput = false”＆gt;

有时使用ng-click内部表单不会按照您想要的方式工作。你可以尝试输入type ='submit' 这也使你的工作更容易。

$ scope var不在child中传播

4 个答案: