Question

我正在尝试显示/隐藏ng-repeat（简单表格）上的按钮。删除按钮由符合按钮替换。这是我的代码

..... 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
    };
}

并在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>

Answer 1

您似乎没有从showDelete函数返回值。它看起来像JSON对象'showDeleteButton'上有一个属性，你可以直接绑定它。

示例plnkr：http://plnkr.co/edit/eZTFyw9tGeWEfYw0U0I8

Answer 2

这就是我的表现：

js：

$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：

<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>

Answer 3

看起来你要做的就是让删除按钮只设置一个标志，显示确实按钮，实际执行删除，对吗？ ng-repeat为每个元素创建了一个新的子范围，因此您只需设置一个可确认的元素即可。在子范围上标记并使用它（fiddle）：

<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>

此外，您似乎已将contact对象传递给clickDelete函数，并将其用作数组的索引，因此我不知道为什么会这样。小提琴使用indexOf来查找要删除的索引。

在ng-repeat中显示/隐藏按钮

3 个答案: