2016-08-03 39 views
-1

如何在这个动态jquery输入字段中调用angularjs函数?jquery append中调用angulajs函数

正如你所看到的,我试图在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(&#39;male&#39;,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(&#39;female&#39;,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

你不应该。如果您正在使用Angular,则应该使用Angular模板创建动态元素。如果你只是在学习Angular,那么当你习惯了它的工作方式,并且如果你需要一些jQuery魔法,了解指令是如何工作的,请将jQuery留在项目中。 –

+0

为什么选择投票? –

回答

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>

+0

好的尝试,但你改变了输入字段中的一些元素,并选择选项。所以代码仍在工作,但我想在角文件中的所有功能,我一起工作。 –

+0

哇这个东西很难 –

+0

确定我的代码正在处理第一个静态字段,但是当编写jquery代码生成字段动态并将函数调用放在jquery中时,它没有调用函数,所以存在这个问题。 –

0

尝试做它的角方式。

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>

+0

好吧,如果我这样做角方式我可以调用生成字段的函数加上我已经在angularjs中已经在一个输入字段中的函数。 –

+0

你可以使用jsfiddler复制我的代码并用它创建一个html。看看它是如何工作的 –

+0

看看我有的ng-repeat块。拿你的追加电话中的HTML,并把一个ng重复。也看看Angular表单验证。你需要学习很多东西,我只是做一个简单的例子,让你的脑袋进入Angular空间。我将删除按钮移动到生成的块中,向您展示如何实现这一点。 –