在jQuery追加中调用AngularJS函数 [英] Call AngularJS function in jQuery append
本文介绍了在jQuery追加中调用AngularJS函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在动态jQuery输入字段中调用AngularJS函数?
How would one call that AngularJS function in this dynamic jQuery input fields?
如您所见，我尝试在html标签中以常规方式调用它，但是它不起作用.
As you can see I tried calling it the regular way in the html tags but it doesn't work.
如果有人能告诉我如何做到这一点，我将非常感激.谢谢.
I would really appreciate if someone could show me how this would be done. Thanks.
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-- >
推荐答案
这应该足以使您前进.
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>
这篇关于在jQuery追加中调用AngularJS函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
