自定义按钮

时间:2015-10-29 11:00:51

标签: javascript jquery angularjs

我在项目中使用xeditable。

Fiddle

上面是小提琴。

我希望只有点击添加按钮时才能保存并发送邀请按钮,而不是保存按钮。

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

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

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

或者我们可以在一个表单中包含所有三个按钮,并根据按钮单击隐藏和显示它。

任何人都可以帮我解决这个问题。

1 个答案:

答案 0 :(得分: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>