Javascript 使用angular获取所有选定复选框及其关联属性

我需要将选中的复选框捆绑在一起才能发布到我的服务器。在每个复选框的属性中，我存储了两个重要的值：“pos”（词性）和definition。我需要遍历这些复选框，将其推送到JSON数组，并在按下“添加单词”按钮时将其发送出去

<input type="checkbox" name="definition-checkbox" pos="noun" definition="Hill, rolling grassland" class="ng-valid ng-dirty">

我曾想过将复选框转换为元素限制指令，并在那里做一些事情，但我不确定如何在这里获取所有值，而不进行一些似乎没有角度的循环

有什么建议吗

---

很难分辨

pos

和

definition

属性中的字符串来自何处，但对于Angular，您希望视图反映出可以在范围上访问的某些数据——对视图的更改（例如，选中框）应该会更改范围上的某些数据

在这种特殊情况下，我希望看到对象上的

pos

和

定义

；也许控制器可以访问它们的数组

app.controller('WordController', function($scope) {
  $scope.word = 'property';

  // Maybe this array came from an $http call; maybe it was injected
  // into the page with `ngInit` or `$routeProvider`.
  // The point is, the controller has a client-side representation of
  // the data you want to show *and manipulate* in the view.
  $scope.definitions = [
    { checked: false, pos: 'noun', definition: 'Something that is owned' },
    { checked: false, pos: 'noun', definition: 'A piece of real estate, such as a parcel of land' },
    { checked: false, pos: 'noun', definition: 'real estate; the business of selling houses' },
    { checked: false, pos: 'noun', definition: 'The exclusive right of possessing, enjoying and disposing of a thing' }
    // ...
  ];
});

现在，此信息已在范围中，您可以在视图中轻松绑定到它：

{{definition.definition}}

由于复选框在单击时直接修改每个定义的

.checked

属性，因此控制器上的

submitDefinitions

方法可以轻松确定选择了哪些定义：

app.controller('WordController', function($scope) {
  // ...

  $scope.submitDefinitions = function() {
    var selectedDefinitions = $scope.definitions.filter(function(def) {
      return def.checked;
    });
    // do something with selected definitions
  };
});

---

下面是一个演示基本技术的JSFIDLE:

很难分辨

pos

和

definition

属性中的字符串来自何处，但对于Angular，您希望视图反映一些可在范围上访问的数据——更改视图（例如，选中一个框）应该更改范围中的一些数据

在这种特殊情况下，我希望看到对象上的

pos

和

定义

；也许控制器可以访问它们的数组

app.controller('WordController', function($scope) {
  $scope.word = 'property';

  // Maybe this array came from an $http call; maybe it was injected
  // into the page with `ngInit` or `$routeProvider`.
  // The point is, the controller has a client-side representation of
  // the data you want to show *and manipulate* in the view.
  $scope.definitions = [
    { checked: false, pos: 'noun', definition: 'Something that is owned' },
    { checked: false, pos: 'noun', definition: 'A piece of real estate, such as a parcel of land' },
    { checked: false, pos: 'noun', definition: 'real estate; the business of selling houses' },
    { checked: false, pos: 'noun', definition: 'The exclusive right of possessing, enjoying and disposing of a thing' }
    // ...
  ];
});

现在，此信息已在范围中，您可以在视图中轻松绑定到它：

{{definition.definition}}

由于复选框在单击时直接修改每个定义的

.checked

属性，因此控制器上的

submitDefinitions

方法可以轻松确定选择了哪些定义：

app.controller('WordController', function($scope) {
  // ...

  $scope.submitDefinitions = function() {
    var selectedDefinitions = $scope.definitions.filter(function(def) {
      return def.checked;
    });
    // do something with selected definitions
  };
});

---

下面是一个演示基本技术的JSFIDLE:

谢谢。非常适合简单用例的解决方案。谢谢。非常适合简单用例的解决方案。