CODEWITHSUNDEEP
javascriptjqueryangularjs
User123
User123

Reputation: 289

Customized buttons

I am using xeditable for my project.

Fiddle

Above is the fiddle.

I want to have save and send invite button instead of save button only while click on add button.

When I click on edit it should be Save button.

I tried using another forom to display save and send invite button with no result.

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

Or can we have all three buttons in one form and hide and show it based on button click.

Can anyone help me with this issue.

Upvotes: 2

Views: 42

Answers (1)

IggY
IggY

Reputation: 3125

Edit : Following your comment, new Fiddle : http://jsfiddle.net/NfPcH/11280/

The same way, you just need to add : ng-show="user.id < 0" to the save button

I updated your fiddle : http://jsfiddle.net/NfPcH/11278/

I'm not an expert in xeditable so maybe there is a better solution. The solution I used is setting user.id = -1 when you add new user.

And setting user.id = users.length+1 only during save.

Therefore you can use ng-show="user.id < 0" on the button you want to show only for new users.

Code:

$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);
};

View:

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

Upvotes: 1

Related Questions