通过 ng-model 将键值对传递给函数

Question

I have a function that gets an object from json, and I list its key-value pairs in ng-repeat. It is a form where value is true/false and depending on that, it is checked or not.

<form class="form-horizontal">
  <div class="form-group form-group__bordered"
       ng-repeat="(key, value) in listOfNotificationTypes">

    <label for="inputEmail3">{{ key | trimkey }}</label>

    <div class="checkbox-wrapper">
        <input type="checkbox" class="checkbox" ng-checked="{{value}}">
    </div>
 </div>

 <div class="form-group">
    <div class="col-12 clearfix">
        <a href="#" class="btn"
            ng-click="updateNotificationSettings()">
         SAVE
        </a>
    </div>
 </div>
</form>

It all works well, but what I want is also to pick up those changed key-value pairs and send them via another function when I hit that SAVE button.

How can I bind the input in ng-model so I have the correct json format passed, like

{
   "key1":"value1",
   "key2":"value2",
   "key3":"value3",
    ...
  }

I suppose I should use ng-model to capture the data, but do not know how exactly to handle it.

Answer 1

So, for your type of of object you will have to use the input like this.

<input type="checkbox" class="checkbox" ng-model="listOfNotificationTypes[key]">

Here is a plunker demonstrating the implementation.

Notes: Just one few note in the future you may need to transform that object in a list of objects like this

[
   {key: "key1", value: false},
   {key: "key2", value: true},
   {key: "key3", value: false}
  ];

For that case the code on the front end will be

<div class="form-group form-group__bordered" ng-repeat="notification in listOfNotificationTypes">
 <label for="inputEmail3">{{ notification.key }}</label>
  <div class="checkbox-wrapper">
    <input type="checkbox" class="checkbox" ng-model="notification.value">
  </div>
</div>