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 Mar 24 '15 at 08:50 — Raulucco, Mar 24 '15 at 08:50

score 1 · Answer 1 · answered Mar 24 '15 at 08:55

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 '15 at 08:55

Huy Hoang Pham

4,107
1
16
28

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 : http://jsfiddle.net/rpatil/q54protv/ – Rubyist Mar 24 '15 at 14:20
http://jsfiddle.net/q54protv/1/. In order for angularJS to work in JSFiddle, you have to choose "No wrap - in " on the left select box. – Huy Hoang Pham Mar 24 '15 at 15:29
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. – Rubyist Mar 25 '15 at 06:23

score 0 · Answer 2 · edited May 23 '17 at 12:12

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 '17 at 12:12

Community

1
1

answered Mar 24 '15 at 08:59

Harold Ship

989
1
8
14

AngularJs + Checkbox Click Is Not Working + Appended Checkboxes

2 Answers2