给出每个角形材料复选框和ID

Question

I am currently having a problem:

I need to create md-checkboxes from a Database. This part works fine with ng-repeat . But I am having a problem reading those checkboxes. Every entry in the Database has its own unique ID (I am using RethinkDB) so I thought I just can apply this as an ID.

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

I am working with Jade / Pug as View Engine. But how am I now able to read out all checkboxes at once? I tried many methods like looping through all ElementsByTagName("md-checkbox") and than with a for to read the checked value but it always returns 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
 }

Do you have any Ideas how to read all Boxes at once?

---

Edit #1 - More Code

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

You should be able to do this with ng-list and 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

angular .module("MyApp", ['ngMessages']) .controller('MyAppController', AppController);

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

Demo

This also works with the material design counterparts, md-list and md-checkbox .

Answer 2

Your question title asks about assigning ids but Your question, which you wrote at the very end is

"Do you have any Ideas how to read all Boxes at once?"

So if you wanna do something with multiple or all checkbox elements you should assign them some css class, say "idea-checkbox".

Then in css styles or in jQuery you can access all those checkboxes at once by using the dotted syntax of ".idea-checkbox".

css ids are used to distinctively access any one html element and classes are used to get access to all the elements at once which has that class.

You can also try to the use angular's "track by n.id" syntax if you want to track them by their id.