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

Question

我有一个从 json 获取对象的函数，我在 ng-repeat 中列出了它的键值对。它是一种值为 true/false 的形式，并根据它来检查或不检查。

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

一切正常，但我还想要获取那些已更改的键值对，并在我点击“保存”按钮时通过另一个函数发送它们。

如何在 ng-model 中绑定(bind)输入，以便传递正确的 json 格式，例如

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

我想我应该使用 ng-model 来捕获数据，但不知道如何处理它。

Answer 1

因此，对于您的对象类型，您必须使用这样的输入。

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

这是一个plunker演示实现。

注意事项: 只需注意一点，将来您可能需要在这样的对象列表中转换该对象

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

对于这种情况，前端的代码将是

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