Displaying Button with ngIf and ngShow in AngularJS

Question

I've two Views person and form. The form view is in a modal window with an own controller. in the person view is a table list. When I click on the open() button for "CREATE", the modal window opens with the empty input fields. When I click on a person in the list, the function open() also opens the modal window with the values in the input fields. I have five buttons (add, update, delete, cancel, reset). If I clicked the open button for "create", only the buttons (add, cancel, reset) should be displayed in the modal window. If I clicked on a person in the list then the buttons (update, cancel, delete, reset) will be displayed. Only the buttons "add", "delete" and "update" need a check to display in the modal window.

Here my Code: (Person View)

<button type="button" class="btn btn-circle pull-right" ng-click="open()">
     Create
</button>
...
<tr ng-repeat="item in items" ng-click="open(this.item)">
   ...
</tr>

PersonCtrl:

$scope.open = function (item) {
  if (!item) {
     $scope.selectedItem = null;
  } else {
     $scope.selectedItem = item;
  }

  ...
  //here is the modal service to open the modal window
}

Second view (modal window):

<div class="modal-body">
    <!-- here is the form -->
</div>
<div class="modal-footer">
    <button class="btn btn-default" ng-click="addBtn(item)">create</button>
    <button class="btn btn-default" ng-click="updateBtn(item)">update</button>
    <button class="btn btn-default" ng-click="cancelBtn()">cancel</button>
    <button class="btn btn-default" ng-click="deleteBtn(item)">delete</button>
    <button class="btn btn-default" ng-click="resetBtn()">reset</button>
</div>

Also my cancel btn doesn't work correctly. When I click on a person in the list the modal window opens and doing some changes in the input fields in the table list you can see immediately the changes. When I click on reset btn, it resets only the form view but didn't resets the table list and with a click on cancel btn the modal window closed but the changes of the person remains. Here the shortly code of reset and cancel btn:

$scope.resetBtn = function () {
  $scope.selectedItem = angular.copy($scope.oldItem);
}

$scope.cancelBtn = function () {
  $modalInstance.dismiss('cancel');
}

Can anyone help me?

user3227295 · Accepted Answer · 2015-05-20 08:45:19Z

0

in the open modal use angular copy;

   $scope.open = function (item) {
  if (!item) {
     $scope.selectedItem = null;
  } else {
     $scope.selectedItem = angular.copy(item);
  }

}

answered May 20, 2015 at 8:45

user3227295

2,1561 gold badge13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

yuro Over a year ago

it doesn't work. Now, the table list won't to updated, when I'm saving changes.

user3227295 Over a year ago

you must add in your save function : $scope.oldItem=$scope.selectedItem

yuro Over a year ago

Which save function do you mean?

yuro Over a year ago

It also doesn't work sorry. Do you have an idea to the button question? How can I show and hide buttons when I click the open function with items and without items.

user3227295 Over a year ago

add ng-if="selectedItem" to show when has item, and ng-if="!selectedItem" to show when is new item.

|

Collectives™ on Stack Overflow

Displaying Button with ngIf and ngShow in AngularJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related