我有一个页面,其中基于一个下拉值,添加了更多的输入字段。此页面由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\">";
}
})
但是角度无法识别此ng-model
当我执行console.log($scope.myData.autoNum);
时,它会告诉undefined。请建议我这个。
如果选择AUL
值,我需要包含mydata.autoNum
输入字段。如果用户选择UL,则不应显示mydata.autoNum。
答案 0 :(得分: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>
答案 1 :(得分:0)
Jquery免费示例。我为你创建了一个plunker示例。 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);
})
});
那个模板是
<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>