私は angularjs を初めて使用し、異なるクリックに基づいて ng-show と ng-hide を使用して、異なる Div を表示および非表示にするためのロジックを作成するのに苦労しています。
ビュー 1:
<div ng-hide="section1">
<select>
<option>Select List 1</option>
<option>Select List 2</option>
</select>
</div>
<div ng-hide="section1">
<ul>
<li ng-repeat="name in names">{{name.item}}</li>
</ul>
<button type="button" ng-click="section1=!section1">Edit</button>
</div>
最初は、ドロップダウン、いくつかのリスト項目、および編集ボタンが表示されます
[編集] ボタンをクリックすると、すべてが非表示になり、ビュー 2 が表示されます
ビュー 2:
<div ng-show="section1">
<button type="button" ng-click="section2=!section2">+ Create New Item</button>
</div>
<div ng-show="section1">
<ul>
<li ng-repeat="name in names">
<input type="text" ng-model="name.item">
</li>
</ul>
<button type="button" ng-click="section1=!section1">Save</button>
</div>
ビュー 2 には、「Create New item」ボタン、ビュー 1 のリスト項目と同じ値を持つ入力フィールドのリスト、および保存ボタンがあります。このビュー 2 は、基本的にビュー 1 の編集モードです。
今まで正常に動作します。
問題: [+Create new item] をクリックすると、[View 2] が非表示になり、[View 3] が開くはずです。
ビュー 3 空白の入力リストと「保存ボタン」が含まれています。「保存ボタン」をクリックすると、「ビュー 3」が非表示になり、「ビュー 1」が再び開きます。
ビュー 3
<div ng-show="section2">
<ul>
<li ng-repeat="name in names">
<input type="text">
</li>
</ul>
<button type="button" ng-click="section2=!section2">Save New List</button>
</div>
ng-show と Hide を使用した異なるボタンのクリックに基づいて、3 つの異なるビューを管理するのに苦労しています。「+新規作成ボタン」をクリックすると、適切に表示および非表示になりません。
ng-show と ng-hide のみで完全に機能させることは可能ですか? 処理するより良い方法はありますか?
どんな助けでも大歓迎です。