AngularJS: Update JSON in modal with specific key

Question

What's the best practice to update json in view with specific key. In my case, i want to update feedback from 'not answered' to 'answered' .

[
  {
    "id": "34",
    "mac_address": "cd:9e:17:64:1b:42",
    "question": "Help me",
    "time": "2016-03-16 16:22:08",
    "is_answered": false
  }
]

to

  [
      {
        "id": "34",
        "mac_address": "cd:9e:17:64:1b:42",
        "question": "Help me",
        "time": "2016-03-16 16:25:29",
        "is_answered": true
      }
    ]

There is some list my customer feedbacks:

<div class="parent" ng-repeat="customer in customers">
  <h2>{{customer.id}}</h2>
  <p>{{customer.question}}</p>
  <h4 ng-show="{{customer.is_answered}}">Answered</h4>
  <h4 ng-show="!{{customer.is_answered}}">Not Answered</h4>
  <button ng-show="!{{customer.is_answered}}" ng-click="showModal()">Reply</button>
</div>

When i click reply button,then appear modal with some inputs to response my customer complaints.

<div id="modal">
<textarea placeholder=""response></textarea>
<button ng-click="submit()">Reply</button>
</div>

i want to update based of feedback id, and again, what the best practice how to do it?

Answer 1

You can pass the customer object with showModal call.

<div class="parent" ng-repeat="customer in customers">
  <h2>{{customer.id}}</h2>
  ...
  <button ng-show="!{{customer.is_answered}}" ng-click="showModal(customer)">Reply</button>
</div>

Inside your controller, save this passed in customer. Once modal closed, update is_answered property of that customer.

 $scope.showModal = function (customer) {
   var selected_customer = customer;

   var modalInstance = $uibModal.open({
     templateUrl: 'myModalContent.html',
     controller: 'ModalInstanceCtrl',
     customer: customer
   });

   modalInstance.result.then(function () {
    selected_customer.is_answered = true;
   }
};

Answer 2

Found my solution, based on Pass input value to $mdDialog .

    vm.showModal = function(e, message) {

      $mdDialog.show({
        clickOutsideToClose:true,
        // locals:{ name: 'Bob'},
        controller: function ($mdDialog) {
          var vm = this;
          vm.message = {};
          vm.message = message;

          $scope.hide = function () {
            $mdDialog.hide();
          };
          $scope.cancel = function () {
            $mdDialog.cancel();
          };
        },
        controllerAs: 'modal',
        templateUrl: 'feedbackForm.html',
        parent: angular.element(document.body),
        targetEvent: e,
      });
    };

In my view :

<h5 style="">{{modal.message.id}}</h5>

Thank you guys