Unable to get ID from Checkbox

Question

I have HTML checkboxes that have their id's generated from an angular ng-repeat and when ever I try and collect the id to use it, it's always coming back as undefined.

$("input:checkbox.time-check-input").each(function () {
    var ruleUnformatted = "";
    var checked = $(this);
    if (checked.is(":checked")) {
        ruleUnformatted = checked.id;
        var name = "Rule" + count;
        settingsObj[name] = ruleUnformatted;
        count++;
    }  
});

And the HTML:

<div class="time-check">
    <input type="checkbox" value="None" ng-click="settings.checked($event)" class="time-check-input" id="{{level.LevelTmsCode}}-{{day.Day}}-open" name="check"/>
    <label for="{{level.LevelTmsCode}}-{{day.Day}}-open" class="time-check-input"></label> <span>Open</span>
</div>

I know sometimes the angular can be loaded after the vanilla code, but I don't think that's the issue in this case as this code is initiated by a button press. Also when debugging in Chrome I can see the id, but for some reason, selecting it is not working.

Please read this https://stackoverflow.com/questions/13151725/how-is-angularjs-different-from-jquery - maybe you going to delete this question. — lin, Sep 06 '17 at 12:17
Sorry but your HTML code doesn't matter. It is a logic problem. Please read the link I posted https://stackoverflow.com/questions/13151725/how-is-angularjs-different-from-jquery and maybe you going to remove jQuery. Do not mix jQuery with AngularJS. — lin, Sep 06 '17 at 12:21
@Satpal Don't just tell me that without explaining why...not helpful — Web Develop Wolf, Sep 06 '17 at 12:23
Take a step back and have a coffee. I would recommend you to read [“Thinking in AngularJS” if I have a jQuery background?](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background), You can get the same result via angular. — Satpal, Sep 06 '17 at 12:24
See now I'm aware of that, however I'm trying the JQuery because the AngularJS didn't give me the result I needed either — Web Develop Wolf, Sep 06 '17 at 12:27
Show us the angular code, we will help you. For starter bind ng-model with checkbox, it will return true or false — Satpal, Sep 06 '17 at 12:27
I've not got the actual code but it was similar to this: https://stackoverflow.com/questions/18100629/angular-get-selected-checkboxes - except in my ng-model I tried using level.LevelTmsCode-day.Day-open in place of record.id — Web Develop Wolf, Sep 06 '17 at 12:31

score 1 · Accepted Answer · answered Sep 06 '17 at 12:36

Your approach is completely wrong. , Here is an example which uses pure angular.

(function(angular) {
  'use strict';
  angular.module('myApp', [])
    .controller('Controller', ['$scope', function($scope) {
    
      //Create array to hold settings
      $scope.settings = [];
      for (var i = 0; i < 10; i++) {
        $scope.settings.push({
          text: "setting" + (i + 1),
          checked: false
        })
      }

      $scope.showChecked = function() {
        var arr = $scope.settings.filter(function(x) {
          return x.checked;
        }).map(function(x) {
          return x.text
        });
        console.clear()
        console.log(arr)
      }
    }]);
})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Controller">

    <div class="time-check" ng-repeat="setting in settings">

      <label class="time-check-input">
    <input type="checkbox" ng-change="showChecked()" ng-model="setting.checked" name="check"/> {{setting.text}}
    </label>

    </div>

  </div>
</div>

Unable to get ID from Checkbox

1 Answers1