`Demo`

Question

我目前遇到了问题：

我需要从数据库创建md-checkboxes。这部分适用于ng-repeat。但是我在阅读这些复选框时遇到了问题。数据库中的每个条目都有自己的唯一ID（我使用的是RethinkDB），所以我想我可以将它作为ID应用。

md-card(ng-repeat="n in ideas")
md-card-content
span
md-checkbox(type="checkbox" id='n.id') {{n.idea}}

我正在使用Jade / Pug作为View Engine。但是，我现在能够立即读出所有复选框吗？我尝试了很多方法，例如循环遍历所有ElementsByTagName("md-checkbox")，而不是使用for来读取已检查的值，但它总是返回undefined。

 const checkboxes = document.getElementsByTagName("md-checkbox");
 console.log(checkboxes) //works fine, prints all checkboxes
 for (let i = 0; i < checkboxes.length; i++) {
    console.log(checkboxes[i].checked); //returns undefined
 }

您是否有任何想法如何一次阅读所有Box？

编辑＃1 - 更多代码

index.js

angular.module('votes', ['ngMaterial'])

.controller("VoteMainController", function ($scope) {
    $scope.safeApply = function (fn) {
        var phase = this.$root.$$phase;
        if (phase == '$apply' || phase == '$digest') {
            if (fn && (typeof(fn) === 'function')) {
                fn();
            }
        } else {
            this.$apply(fn);
        }
    };

    register = [];

    //var to store database content and add it to page
    $scope.ideas;

    //Downloading Database stuff as JSON
    $.ajax({
        type: "GET",
        url: "./api",
        async: true,
        success: function (content) {
            for (let i = 0; i < content.length; i++) {
                register.push({
                    [content[i].id]: {
                        checked: false
                    }
                })
            }
            $scope.ideas = content;
            $scope.safeApply();
        },
    });


    function checkChecked() {
        const checkboxes = document.getElementsByTagName("md-checkbox");
        for (let i = 0; i < checkboxes.length; i++) {
            console.log(checkboxes[i].checked);
        }
    }
})

index.jade

    form(id="login" method="post")
       md-card(ng-repeat="n in ideas")
          md-card-content
             span
             md-checkbox(type="checkbox" id='n.id') {{n.idea}}
          md-input-container
             label Andere Idee?
             md-icon search
             input(name='idea', ng-model='idea', id='idea', type='text')
         div(layout="column")
             md-button(type='submit', class="md-raised md-primary unselectable")
                 | Senden!

Answer 1

您应该可以使用ng-list和ng-model：

执行此操作

<强> HTML

<div ng-app="MyApp" ng-controller="MyAppController">
  <ng-list>
    <ng-list-item ng-repeat="n in ideas">
      <p>{{n.id}}: <input type="checkbox" ng-model="n.isChecked"></p>
    </ng-list-item>
  </ng-list>
  <p>Current state of model: {{ ideas }}</p>
</div>
<p>Current state of model: {{ ideas }}</p>

<强>角

角 .module（＆＃34; MyApp＆＃34;，[＆＃39; ngMessages＆＃39;]） .controller（＆＃39; MyAppController＆＃39;，AppController）;

function AppController($scope) {
  $scope.ideas = [{
    id: 193872768,
    isChecked: false
  },{
    id: 238923113,
    isChecked: false
  }];
}

`Demo`

这也适用于材料设计对手md-list和md-checkbox。

Answer 2

您的问题标题询问了如何分配ID，但您在最后写的问题是

“你有什么想法如何一次阅读所有盒子？”

因此，如果您想对多个或所有复选框元素执行某些操作，则应为其分配一些css类，例如“idea-checkbox”。

然后在css样式或jQuery中，您可以使用“.idea-checkbox”的虚线语法一次访问所有这些复选框。

css id用于区别访问任何一个html元素，并且类用于同时访问具有该类的所有元素。

如果你想通过他们的id来跟踪它们，你也可以尝试使用angular的“track by n.id”语法。

给每个角度材料复选框和ID

2 个答案:

`Demo`