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 user3227295 · Accepted Answer · 2015-05-20T08:45:19

in the open modal use angular copy;

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

}

Displaying Button with ngIf and ngShow in AngularJS

1 Answers