我是 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 上有一个“创建新项目”按钮、与视图 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 完美配合?有没有更好的处理方法?
任何帮助将不胜感激。