javascript - AngularJS 和 Jquery 的混合

Question

我有一个页面，其中基于一个下拉值添加了更多输入字段。该页面由 angularjs 驱动。只是为了引入额外的输入字段，我才像这样使用了jquery。

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\">";
         }
    })

但是 Angular 无法识别这个 ng-model 当我执行 console.log($scope.myData.autoNum); 时，它会告诉 undefined。请就此向我提出建议。

如果选择 AUL 值，我需要包含 mydata.autoNum 输入字段。如果用户选择 UL，则 mydata.autoNum 不应显示。

Answer 1

我建议您首先在模板中使用ng-if。以下使用与 jQuery 更改事件相同的条件

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