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

但是角度无法识别此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>

Answer 2

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>

AngularJS和Jquery的混合

2 个答案: