自定义按钮

Question

我正在为我的项目使用 xeditable。

小提琴

以上是小提琴。

我只想在单击添加按钮时保存并发送邀请按钮而不是保存按钮。

当我点击编辑它应该是保存按钮。

我尝试使用另一个表单来显示保存和发送邀请按钮，但没有结果。

<form editable-form name="rowform" id="hidebuttons12" ng-show="rowform.$visible" class="form-buttons form-inline" shown="">
    <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel(); isCollapsed2 = !isCollapsed2" ng-hide="hideButton[$index]" class="btn btn-default">cancel</button>
    <button type="submit" ng-click="saveUser(); isCollapsed2 = !isCollapsed2" ng-disabled="rowform.$waiting" ng-hide="hideButton[$index]" class="btn btn-primary">Save changes</button>
</form>

<form class="text-right" editable-form name="rowform1" ng-show="rowform1.$visible" class="form-buttons form-inline" shown="inserted == user">
    <button type="button"  ng-click="removeUser($index);" class="btn btn-default">cancel</button>
    <button type="button" ng-click="saveUser(); sendInvite(); isCollapsed2 = !isCollapsed2" ng-disabled="rowform1.$waiting" class="btn btn-primary">{{buttonText}}</button>
</form>

或者我们可以将所有三个按钮都放在一种形式中，并根据按钮点击隐藏和显示它。

谁能帮我解决这个问题。

Answer 1

编辑：根据您的评论，新小提琴： http : //jsfiddle.net/NfPcH/11280/

同样的方法，你只需要在保存按钮上添加： ng-show="user.id < 0"

---

我更新了你的小提琴： http : //jsfiddle.net/NfPcH/11278/

我不是 xeditable 方面的专家，所以也许有更好的解决方案。 我使用的解决方案是在添加新用户时设置user.id = -1 。

并且仅在保存期间设置user.id = users.length+1 。

因此，您可以在只想为新用户显示的按钮上使用ng-show="user.id < 0" 。

代码：

$scope.saveUser = function (data, user) {
    //$scope.user not updated yet
    user.id = $scope.users.length + 1;
    angular.extend(data, {
        id: user.id
    });
    return $http.post('/saveUser', data);
};

// add user
$scope.addUser = function () {
    $scope.inserted = {
        id: -1,
        name: '',
        status: null,
        group: null
    };
    $scope.users.push($scope.inserted);
};

看法：

<button type="button" ng-show="user.id < 0" ng-click="saveUser(); sendInvite();" ng-disabled="rowform.$waiting" class="btn btn-primary">Send invite</button>