Geek Geek - 19 days ago 5
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.

Html:

<label for="Type">MyDataType:</label>
<select ng-model="myData.Type" id="selectBox" >
<option value="UL">Other</option>
<option value="AUL">Auto</option>
</select>
<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
ng-model
When i do a
console.log($scope.myData.autoNum);
it will tell undefined. Please suggest me on this.

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

Answer

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">
</span>
Comments