2

在项目列表中，单击项目会打开一个使用 的输入字段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/

4

4 回答 4

5

你这里有一些错误。

  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 变量，则在您保存时父级将无法访问它。

于 2013-08-27T11:44:42.960 回答
2

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

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

您在对 的调用中也有错字saveData，但这不是问题。

于 2013-08-27T11:31:40.050 回答
1

你已经<button ng-click="saveDate()">在你的视图中给出了，在你的控制器中你把函数称为$scope.saveData. 打字错误。更改$scope.saveData为$scope.saveDate

于 2013-08-27T11:31:33.180 回答
0

你为什么不尝试类似的东西：

ng-click="showInput = false">

有时在表单内使用 ng-click 不会按您想要的方式工作。您也可以尝试使用 input type='submit' ，这会使您的工作更轻松。

于 2013-10-04T15:19:34.400 回答