2013-08-27 24 views
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/

回答

5

這裏有一些錯誤。

  1. 在你的HTML中,你應該寫saveData()(不是saveDate())。

  2. 當您點擊您的li (包括您的按鈕)中的任何元素時,它會將您的showInput設置爲true。

  3. 您正在處理範圍內的純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變量,那麼當你保存時,父母將無法訪問它。

+3

使用saveData($ index)實際上是最好的方式,就像Florian說的那樣。 –

1

呦給在您看來<button ng-click="saveDate()">和控制器調用該函數作爲$scope.saveData。錯字錯誤。將$scope.saveData更改爲$scope.saveDate

2

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

我通常在這種情況下做的事情是跟蹤當前顯示的那些表單並實現類似切換的方法,如this fiddle中所示。這會跟蹤控制器中的打開窗體,而不是$scope對象,該對象只提供訪問私人信息的方法(對所有子範圍,例如ng-repeat)。

您在致電saveData時也有一個錯字,但這不是問題所在。

0

你爲什麼不試着這麼做:

NG點擊=「showInput =假」>

有時使用內部形狀NG單擊亙古不變的工作,你所希望的方式。你可以嘗試輸入類型='提交' 也使您的工作更容易。