Question

在我的JS代码中，我根据下拉元素的选择附加复选框。如果我从下拉列表中选择一个元素，那么在同一个内联中我创建一个具有相同名称的复选框，并从下拉列表中禁用该元素，因为已经显示在复选框中。

这用于渲染HighCharts。现在我试图取消选中/检查复选框并尝试使用on-change功能来执行一个函数，但系统没有调用该函数。

几段代码：

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);

输出：

<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'); 
  }

此功能未调用。

Answer 1

它可以在样本小提琴上正常工作，你可以查看控制器吗？

＆＃13;

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'); 
  }
});

＆＃13;

<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>

＆＃13;

Answer 2

我要说的第一件事是看看这个：

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

您的问题是，当您添加输入时，angular需要编译它。我建议而不是在选择处理程序中添加复选框，使用ng-repeat将它们 all 添加到html中，并将模型变量与ng-一起使用显示以控制哪些是可见的。

AngularJs +复选框单击“不工作+附加复选框”

2 个答案: