我目前有一個問題：給每個角材複選框和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`