給出每個角形材料復選框和ID

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讀取已檢查的值，但它始終返回未定義的值。

 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>

角

angular .module（“ MyApp”，['ngMessages']）.controller（'MyAppController'，AppController）;

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

演示

這也適用於與材料設計相對應的md-list和md-checkbox 。

Answer 2

您的問題標題詢問有關分配ID的問題，但您在最后寫的問題是

“您有任何想法如何一次讀取所有Box嗎？”

因此，如果您想對多個或所有復選框元素進行操作，則應為它們分配一些CSS類，請說“ idea-checkbox”。

然后，在CSS樣式或jQuery中，您可以使用“ .idea-checkbox”的點分語法立即訪問所有這些復選框。

CSS ID用於區別地訪問任何一個html元素，而類用於一次訪問具有該類的所有元素。

如果要按角度跟蹤它們，請嘗試使用angular的“ n.id跟蹤”語法。