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?

Personally I would use lodash findIndex to fetch the item by id and perform the update - lodash.com/docs#findIndex — dmoo
– dmoo, Commented Apr 3, 2016 at 1:28

George Chen · Accepted Answer · 2016-04-03 02:00:22Z

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

edited Apr 3, 2016 at 2:00

answered Apr 3, 2016 at 1:54

George Chen

6,9895 gold badges23 silver badges24 bronze badges

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

1 Comment

artemist Over a year ago

i am still confusing..ok, simplified my question is, how to view question content in my modal. Actually i am using $mdDialog with specific id.

Community · Accepted Answer · 2017-05-23 11:45:07Z

0

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

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Apr 3, 2016 at 3:46

artemist

654 bronze badges

Collectives™ on Stack Overflow

AngularJS: Update JSON in modal with specific key

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related