如何在这个动态jQuery输入字段中调用AngularJS函数？
正如您所看到的，我尝试在html标签中以常规方式调用它，但它不起作用。
如果有人能告诉我这是怎么做的，我真的很感激。感谢。
function ClickToEditCtrl($scope) {
$scope.changeValue = function(ctrl, cmbSource) {
var option = 0;
if (cmbSource == 1) {
option = $scope.mySelect0;
} else if (cmbSource == 2) {
option = $scope.mySelect1;
}
if (option == '1') {
if (cmbSource == 1) {
$scope.max1 = 1;
$scope.min = 0;
}
if (cmbSource == 2) {
$scope.max2 = 1;
$scope.min = 0;
}
} else if (option == '2') {
if (cmbSource == 1) {
$scope.max1 = 15;
$scope.min = 0;
}
if (cmbSource == 2) {
$scope.max2 = 15;
$scope.min = 0;
}
} else if (option == '3') {
if (cmbSource == 1) {
$scope.max1 = 25;
$scope.min = 0;
}
if (cmbSource == 2) {
$scope.max2 = 25;
$scope.min = 0;
}
}
//alert($scope.mySelect);
}
$scope.validate = function($event) {
//ng-keypress="validate($event)"
//console.log($event);
}
$scope.update = function(source, $event, cmbSource) {
$scope.validate($event);
var option = 0;
if (cmbSource == 1) {
option = $scope.mySelect0;
} else if (cmbSource == 2) {
option = $scope.mySelect1;
}
//option 1 solo person
if (option == 1) {
var getMax = 1;
if (source == "male") {
if (cmbSource == 1) {
$scope.set0.female = getMax - $scope.set0.male;
} else if (cmbSource == 2) {
$scope.set1.female = getMax - $scope.set1.male;
}
}
if (source == "female") {
if (cmbSource == 1) {
$scope.set0.male = getMax - $scope.set0.female;
} else if (cmbSource == 2) {
$scope.set1.male = getMax - $scope.set1.female;
}
}
}
//option 2 ensembley
if (option == "2") {
var getMax = 15;
if (source == "male") {
if (cmbSource == 1) {
$scope.set0.female = getMax - $scope.set0.male;
} else if (cmbSource == 2) {
$scope.set1.female = getMax - $scope.set1.male;
}
}
if (source == "female") {
if (cmbSource == 1) {
$scope.set0.male = getMax - $scope.set0.female;
} else if (cmbSource == 2) {
$scope.set1.male = getMax - $scope.set1.female;
}
}
}
//option 3 chior
if (option == "3") {
var getMax = 25;
if (source == "male") {
if (cmbSource == 1) {
$scope.set0.female = getMax - $scope.set0.male;
} else if (cmbSource == 2) {
$scope.set1.female = getMax - $scope.set1.male;
}
}
if (source == "female") {
if (cmbSource == 1) {
$scope.set0.male = getMax - $scope.set0.female;
} else if (cmbSource == 2) {
$scope.set1.male = getMax - $scope.set1.female;
}
}
}
}
}
$(document).ready(function() {
var
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div><table class="tg" style="color:black; font-size: 80%;" cellspacing="0"><tr><td class="tg-yw4l" width="45px"><select class="" id="element_10" name="class1[]" style="margin: 0 1rem 1rem 0rem; padding-right:-10px;"><option value="" selected="selected"></option><option value="1" >class 1</option><option value="2" >class 2</option><option value="3" >class 3</option><option value="4" >class 4</option><option value="5" >class 5</option><option value="6" >class 6</option><option value="7" >class 7</option></select></td><td class="tg-yw4l" width="45px;"><select class="" id="dropdown" name="category1[]" ng-change="changeValue(this,2)" ng-model="mySelect1"><option value="" selected="selected"></option><option value="1" >A-Solo 1 person</option><option value="2" >B-Ensemble 2-15 persons</option><option value="3" >C-Choirs 16-25 persons</option></select></td><td class="tg-yw4l" width="181px"><input id="element_2" name="entrytitle1[]" class="" type="text" maxlength="255" value="" style="margin: 0rem 0rem 1rem;" /></td><td class="tg-yw4l" width="185px"><textarea id="element_2" name="entryname1[]" class="element textarea small" onclick="myFunctionAlert()" required style=" height: 0px; font-size:150%; color:black; line-height:1.4rem;"></textarea></td><td class="tg-yw4l" style="margin-left:-20px;" width="40px;"><input id="male" name="numMales1[]" class="male" type="number" onkeypress="validate(event)" min="0" max="{{max2}}" ng-model="set1.male" ng-change="update('male',this,2)" /></td><td class="tg-yw4l" width="48px;"><input id="female" name="numFemales1[]" class="female" type="number" onkeypress="validate(event)" ng-model="set1.female" min="0" max="{{max2}}" ng-change="update('female',this,2)"/></td><td class="tg-yw4l" width="125px"><input id="element_2" name="composer1[]" class="" type="text" maxlength="255" value="" style="margin: 0 0rem 1rem;"/></td></tr></table><a href="#" class="remove_field warning hollow button tiny" style="float:right;">Remove</a></div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
< !html-- >
答案 0 :(得分：0)
尝试以Angular方式进行。
angular.module('testApp', []).controller('testController', function() {
var vm = this;
vm.items = [];
var numberAdded = 1;
vm.add = function() {
vm.items.push(numberAdded++);
}
vm.remove = function(item) {
vm.items.splice(vm.items.indexOf(item), 1);
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<span ng-app="testApp" ng-controller="testController as vm">
<button ng-click="vm.add()">Add</button>
<div ng-repeat="item in vm.items">
Dynamically Added {{item}}
<button ng-click="vm.remove(item)">Remove</button>
</div>
</span>
答案 1 :(得分：0)
这应该足以让你前进。
angular.module('app', []).controller('ClickToEditCtrl', function() {
var vm = this;
vm.sets = [{}];
vm.addSet = function() {
vm.sets.push({
});
};
vm.remove = function(set) {
vm.sets.splice(vm.sets.indexOf(set), 1);
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ClickToEditCtrl as vm">
<div class="input_fields_wrap">
<table>
<!--FIRST ROW OF ENTRIES-->
<tr ng-repeat="set in vm.sets">
<td class="tg-yw41">
<select class="dropdown" id="dropdown" name="category" ng-model="group.category" required>
<option value="" selected="selected"></option>
<option value="1" id="1"> A-Solo 1 person</option>
<option value="2" id="2">B-Ensemble 2-15 persons</option>
<option value="3" id="3">C-Choirs 16-25 persons</option>
</select>
</td>
<td class="tg-yw4l" style="margin-left:-20px;"><input id="male" name="numMales1[" class="male" type="number" style="margin: 0 0rem 1rem;" min="0" max="{{max1}}" ng-model="set.male" ng-required /> </td>
<td class="tg-yw4l"><input id="female" name="numFemales1" class="female" type="number" style="margin: 0 0rem 1rem;" ng-model="set.female" min="0" max="{{max1}}" ng-required /> </td>
<td><button ng-click="vm.remove(set)">Remove</button></td>
</tr>
<!--SECOND ROW OF ENTRIES-->
</table>
</div>
<button class="add_field_button secondary hollow button" name="addmore"><span style="color:white;" ng-click="vm.addSet()">Add More Fields</span></button><br/>
<p>max1 = {{max1}} </p>
<p>min = {{min}} </p>
<p>max2 = {{max2}} </p>
<p>min = {{min}} </p>
</div>
</div>