Geek Geek - 11 months ago 57
HTML Question

Mix of AngularJS and Jquery

I have a page in which based on the one drop down value few more input fields are added. This page is driven by angularjs. Only for inducing additional input fields i have used jquery like this.


<label for="Type">MyDataType:</label>
<select ng-model="myData.Type" id="selectBox" >
<option value="UL">Other</option>
<option value="AUL">Auto</option>
<div id="outputArea">

$("#selectBox").change(function() {
var htmlString = "";
var len = $(this).val();
if (len == 'AUL'){
htmlString = "<label for=\"Auto#\">Auto#:</label><input type=\"text\"ng-model=\"mydata.autoNum\">";

But angular is not able to recognize this
When i do a
it will tell undefined. Please suggest me on this.

value is selected i need to include
input field. And if user selects UL then mydata.autoNum should not display.

Answer Source

I suggest you start by using ng-if in the template. The following uses the same conditional as in your jQuery change event

<span ng-if="myData.Type=='AUL'">
    <label for="Auto">Auto#:</label>
    <input id="Auto" type="text" ng-model="mydata.autoNum">