在 AngularJS 中使用 ngIf 和 ngShow 显示按钮
Posted
技术标签:
【中文标题】在 AngularJS 中使用 ngIf 和 ngShow 显示按钮【英文标题】:Displaying Button with ngIf and ngShow in AngularJS 【发布时间】:2015-08-01 09:33:02 【问题描述】:我有两个 Views 人和表单。表单视图位于带有自己的控制器的模式窗口中。在人员视图中是一个表格列表。当我单击“CREATE”的 open() 按钮时,模式窗口将打开,其中包含空输入字段。当我单击列表中的一个人时,函数 open() 还会打开模式窗口,其中包含输入字段中的值。我有五个按钮(添加、更新、删除、取消、重置)。如果我单击“创建”的打开按钮,则只有按钮(添加、取消、重置)应显示在模式窗口中。如果我单击列表中的某个人,则会显示按钮(更新、取消、删除、重置)。只有“添加”、“删除”和“更新”按钮需要检查才能显示在模式窗口中。
这是我的代码: (个人视图)
<button type="button" class="btn btn-circle pull-right" ng-click="open()">
Create
</button>
...
<tr ng-repeat="item in items" ng-click="open(this.item)">
...
</tr>
人员控制:
$scope.open = function (item)
if (!item)
$scope.selectedItem = null;
else
$scope.selectedItem = item;
...
//here is the modal service to open the modal window
第二个视图(模态窗口):
<div class="modal-body">
<!-- here is the form -->
</div>
<div class="modal-footer">
<button class="btn btn-default" ng-click="addBtn(item)">create</button>
<button class="btn btn-default" ng-click="updateBtn(item)">update</button>
<button class="btn btn-default" ng-click="cancelBtn()">cancel</button>
<button class="btn btn-default" ng-click="deleteBtn(item)">delete</button>
<button class="btn btn-default" ng-click="resetBtn()">reset</button>
</div>
我的取消按钮也不能正常工作。当我单击列表中的某个人时,模式窗口会打开并在表格列表中的输入字段中进行一些更改,您可以立即看到更改。当我单击重置 btn 时,它仅重置表单视图但没有重置表格列表,并且单击取消 btn 模式窗口关闭,但人员的更改仍然存在。这里是重置和取消 btn 的简短代码:
$scope.resetBtn = function ()
$scope.selectedItem = angular.copy($scope.oldItem);
$scope.cancelBtn = function ()
$modalInstance.dismiss('cancel');
谁能帮帮我?
【问题讨论】:
【参考方案1】:在打开的模态中使用角复制;
$scope.open = function (item)
if (!item)
$scope.selectedItem = null;
else
$scope.selectedItem = angular.copy(item);
【讨论】:
它不起作用。现在,当我保存更改时,表格列表不会更新。 你必须在你的保存功能中添加:$scope.oldItem=$scope.selectedItem 你指的是哪个保存功能? 对不起,它也不起作用。您对按钮问题有想法吗?当我点击有项目和没有项目的打开功能时,如何显示和隐藏按钮。 添加 ng-if="selectedItem" 以显示何时有项目,并添加 ng-if="!selectedItem" 以显示何时是新项目。以上是关于在 AngularJS 中使用 ngIf 和 ngShow 显示按钮的主要内容,如果未能解决你的问题,请参考以下文章
*ngIf <ng-content> 嵌入从外部获取任何可能的内容?
当 ngIf 为 false 时构建 Angular4 ng-content