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 では、(saveDate() ではなく) saveData() を記述する必要があります。

  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 に答える
1

Yo は<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 に答える