[英]Show/hide a button inside ng-repeat
I am trying to show/hide buttons on a ng-repeat (a simple table).我正在尝试在 ng-repeat(一个简单的表格)上显示/隐藏按钮。 A delete button replaced by a conform button.
删除按钮替换为符合按钮。
Here is my code这是我的代码
..... Angular stuff .....
function ContactsCtrl($scope, $http) {
$scope.order = '-id';
$scope.currentPage = 0;
$scope.pageSize = 15;
$http.get('/events/<%= @event.id -%>/contacts.json').success(function(data) {
$scope.contacts = data;
$scope.numberOfPages=function(){
return Math.ceil($scope.contacts.length/$scope.pageSize);
}
});
$scope.clickDelete = function(e,t) {
console.log("delete");
// rest api stuff...
$scope.contacts.splice(e, 1); // This WORKS!
};
$scope.showDelete = function(e,t) {
e.showDeleteButton = true; // This DOES NOT
};
}
And in HTML:在 HTML 中:
<tr ng-repeat="contact in contacts | filter:search | orderBy:order | startFrom:currentPage*pageSize | limitTo:pageSize">
<td><a href="/contacts/{{contact.id}}/edit">{{contact.email}}</a></td>
...
<td><a href="#" ng-click="showDelete(contact)" class="btn btn-small">delete</a>
<a href="/contacts/{{contact.id}}" ng-show="showDeleteButton" ng-click="clickDelete(contact)" class="btn btn-small btn-danger">confirm</a>
</td>
</tr>
You don't appear to be returning a value from the showDelete function.您似乎没有从 showDelete 函数返回值。 It also looks like there is a property on the JSON object 'showDeleteButton' which you could bind to directly.
看起来 JSON 对象“showDeleteButton”上也有一个属性,您可以直接绑定到该属性。
Example plnkr: http://plnkr.co/edit/eZTFyw9tGeWEfYw0U0I8示例 plnkr: http ://plnkr.co/edit/eZTFyw9tGeWEfYw0U0I8
This is how I did it:我是这样做的:
JavaScript: JavaScript:
$scope.clickDelete = function(contact,i) {/* ... */ $scope.contacts.splice(i, 1);};
$scope.clickShowConfirm = function(contact) {contact.showdelete = true;};
$scope.clickCancel = function(contact) {contact.showdelete = false;}
$scope.showOrHide = function(contact) {return contact.showdelete;};
HTML: HTML:
<a href="#" ng-click="clickShowConfirm(contact)" ng-hide="showOrHide(contact)" class="btn btn-small">delete</a>
<a href="/contacts/{{contact.id}}" ng-click="clickDelete(contact,$index)" class="btn btn-small btn-danger" ng-show="showOrHide(contact)">ok</a>
<a href="#" ng-show="showOrHide(contact)" ng-click="clickCancel(contact)" class="btn btn-small">cancel</a>
It seems like what you are trying to do is have the delete button just set a flag that will show the confirm button which will actually perform the delete, correct?看起来您想要做的是让删除按钮设置一个标志,该标志将显示将实际执行删除的确认按钮,对吗?
ng-repeat
creates a new child scope for each element, so you could just set a 'confirmable' flag on the child scope and use that ( fiddle ): ng-repeat
为每个元素创建一个新的子作用域,因此您可以在子作用域上设置一个“可确认”标志并使用它(小提琴):
<a ng-click="confirmable = true">delete</a>
<a ng-show="confirmable" ng-click="clickDelete(contact)">confirm</a>
<a ng-show="confirmable" ng-click="confirmable = false">cancel</a>
Also it looks like you're passing the contact
object to your clickDelete
function and using it as an index into the array so I don't know why that works.此外,您似乎正在将
contact
对象传递给clickDelete
函数并将其用作数组的索引,所以我不知道为什么会这样。 The fiddle uses indexOf
to find the index to delete.小提琴使用
indexOf
查找要删除的索引。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.