我目前有一个问题：给每个角材复选框和ID

我需要从数据库创建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 
}

你有什么想法如何一次读取所有的盒子？

编辑＃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!

来源

2017-01-23 dunklesToast

你可以添加你的完整代码，HTML和所有？我也无法在任何地方看到你使用'scope'。 – ZombieChowder

for循环不是异步的，如果它的数据来自数据库，它应该是angular.foreach并且请添加更多代码 – alphapilgrim

@ ZombieChowder增加了更多代码！ – dunklesToast

你应该能够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（ “MyApp的”，[ 'ngMessages']） .controller（ 'MyAppController'，AppController的）;

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

`Demo`

这也适用于材料设计同行，md-list和md-checkbox。

来源

2017-01-23 20:48:29 brandonscript

你的问题的标题问有关分配的ID，但你的问题，你在最后写了是

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

所以，如果你想对多个或所有复选框元素做些什么，你应该给他们分配一些CSS类，比如说“idea-checkbox”。

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

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

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

来源

2017-01-23 21:00:59 forsimb

当使用像Angular这样的model-view- *框架时，这不是推荐的方法。当您尝试解析DOM以枚举值时，它会中断数据模型，并且在将更复杂的行为添加到应用程序时具有相当重要的意义。 – brandonscript

给每个角材复选框和ID

回答

Demo

相关问题

`Demo`