Mix of AngularJS and Jquery

Question

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.

You would need to use $compile when injecting the html that has directives in it. But why are you using jQuery for this at all? It is very simply done in angular template and there is no need for the jQuery shown. Provide your template structure for more details — charlietfl
– charlietfl, Commented Nov 13, 2016 at 14:26
i tried to figure out to fit this in angular but i failed. Could you please give me some more information like how to do in angular when i wanted to include few more fields to the existing html — Geek
– Geek, Commented Nov 13, 2016 at 14:29
Can use ng-if. Need more code context to be able to help more — charlietfl
– charlietfl, Commented Nov 13, 2016 at 14:40
Please don't dump code blobs into comments. Update the question with formatted code and other relevant details — charlietfl
– charlietfl, Commented Nov 13, 2016 at 14:43

charlietfl · Accepted Answer · 2016-11-13 14:59:55Z

1

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>

answered Nov 13, 2016 at 14:59

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Geek Over a year ago

Thanks!! This works!! But if i select the drop down value as AUL and Enter the data in this Auto# field and later change the drop down value to something else this still holds the value of mydata.autoNum and when i press a submit this value gets passed to back end also!

charlietfl Over a year ago

Then use a watch in controller to watch myData.Type and delete the autoNum property if value not right, or do some cleanup before submitting. Your jQuery would have had same problem if you made it work

Geek Over a year ago

So if myData.Type != 'AUL' then i will clear the value of autoNum.

Ariel Henryson · Accepted Answer · 2016-11-13 15:12:33Z

0

Jquery free example. I created a plunker example for you. http://plnkr.co/edit/fIxF1yGMN2PFnuIl6S4c?p=preview

var app = angular.module('demo', []);

app.controller('demo', function($scope) {
    $scope.val;

    $scope.$watch('val', function(newVal) {
      console.log(newVal);
    })
});

And the template for that is

<div ng-controller="demo">
  <select ng-model="val" id="selectBox">
      <option value="UL">Other</option>
      <option value="AUL">Auto</option>
  </select>


  <br>
  <br>
  <div ng-if="val === 'AUL'">
    show only if val === AUL 
  </div>
</div>

answered Nov 13, 2016 at 15:12

Ariel Henryson

1,3561 gold badge10 silver badges13 bronze badges

Collectives™ on Stack Overflow

Mix of AngularJS and Jquery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related