1. 首頁
  2. 問答
  3. jquery append中調用angulajs函數

jquery append中調用angulajs函數

2016-08-03 72 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-- >

來源

2016-08-03 Shanna Chambers

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

來源

2016-08-04 00:15:50

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

來源

2016-08-03 22:45:57

+0

好吧，如果我這樣做角方式我可以調用生成字段的函數加上我已經在angularjs中已經在一個輸入字段中的函數。 –

+0

你可以使用jsfiddler複製我的代碼並用它創建一個html。看看它是如何工作的 –

+0

看看我有的ng-repeat塊。拿你的追加電話中的HTML，並把一個ng重複。也看看Angular表單驗證。你需要學習很多東西，我只是做一個簡單的例子，讓你的腦袋進入Angular空間。我將刪除按鈕移動到生成的塊中，向您展示如何實現這一點。 –

相關問題

 相關問題