AngularJs + Checkbox Click Is Not Working + Appended Checkboxes

Question

In my JS code, I am appending checkbox as per the selection of dropdown element. If I am selecting a element from dropdown, then at the same inline I am creating a checkbox of same name and disabling the element from dropdown because already showing in checkbox.

This is used to render HighCharts. Now I am trying to uncheck / check the Checkbox and trying on-change function to execute one function but system is not calling that function.

Few snippets of code:

var add_bpx = '<label class="check_btn"><input id="box" type="checkbox" ng-model="'+element+'" ng-change="runCheckedBox()" checked name="'+element+'" '+element+'</label>';
$('#input_row').append(add_box);

Output:

<div class="input_row" id="input_row">
  <label class="check_btn">
    <input id="box" type="checkbox" ng-model="Box1" ng-change="runCheckedBox()" checked="" name="Box1">Box1
  </label>
  <label class="check_btn">
    <input id="box" type="checkbox" ng-model="Box2" ng-change="runCheckedBox()" checked="" name="Box2">Box2
  </label>
</div>

AngularJs:-

  $scope.runCheckedBox = function(){
    console.log('RunCheck Box executed'); 
  }

Here function is not calling.

With checkbox i think is better to use ng-click

Raulucco
– Raulucco

2015-03-24 08:50:17 +00:00
Commented Mar 24, 2015 at 8:50 — Raulucco
– Raulucco, Commented Mar 24, 2015 at 8:50

Huy Hoang Pham · Accepted Answer · 2015-03-24 08:55:41Z

1

It works fine on a sample fiddle, can you check the controller?

var elements = ['b1', 'b2', 'b3', 'b4'];
for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    var add_box = '<label class="check_btn"><input id="box" type="checkbox" ng-model="' + element + '" ng-change="runCheckedBox()" checked name="' + element + '" ' + element + '</label>';
    $('#input_row').append(add_box);
}

var app = angular.module('app', []);
app.controller('myCtrl', function ($scope) {
  $scope.runCheckedBox = function(){
    console.log('RunCheck Box executed'); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="app">
    <div ng-controller="myCtrl">
        <div class="input_row" id="input_row"></div>
    </div>
</body>

answered Mar 24, 2015 at 8:55

Huy Hoang Pham

4,1471 gold badge19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RahulOnRails Over a year ago

Hey Huy, Thanks a lot for the reply... I tried your snippet code at Jsfiddle. But it is not working. Please have a look .. May be I missed something. JsfiddleLink : jsfiddle.net/rpatil/q54protv

Huy Hoang Pham Over a year ago

jsfiddle.net/q54protv/1. In order for angularJS to work in JSFiddle, you have to choose "No wrap - in <body>" on the left select box.

RahulOnRails Over a year ago

Thanks Huy, I saw the new fiddle link. It is working now. But I am unable to implement this feature inside my html. You said like add NoWrap in body. But I am not able to do that. Please suggest something.

Community · Accepted Answer · 2017-05-23 12:12:54Z

0

First thing I would say is take a look at this:

"Thinking in AngularJS" if I have a jQuery background?

Your problem is that when you add the input, angular needs to compile it. I would suggest rather than adding the checkboxes in your select handler, you add them all to the html up front using ng-repeat, and use a model variable together with ng-show to control which ones are visible.

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Mar 24, 2015 at 8:59

Harold Ship

1,0391 gold badge9 silver badges14 bronze badges

Collectives™ on Stack Overflow

AngularJs + Checkbox Click Is Not Working + Appended Checkboxes

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related