AngularJS和Jquery的混合

我有一个基于一个下拉值的页面，添加了更多的输入字段。这个页面是由angularjs驱动的。只为了诱导额外的输入字段，我已经使用jQuery这样。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\">"; 
     } 
    })

但是角度是不能当我做了console.log($scope.myData.autoNum);它会告诉未定义的认识到这一点ng-model。请在此建议我。

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

来源

2016-11-13 Geek

注入具有指示在它的HTML时，您将需要使用'$ compile'。但为什么你为此使用jQuery？它在角模板中非常简单，并且不需要显示jQuery。提供您的模板结构以获取更多详细信息 – charlietfl

我试图找出适合这种角度的方法，但是我失败了。你可以给我一些更多的信息，比如如何在角度上做，当我想包含更多的字段到现有的HTML – Geek

可以使用'ng-if'。需要更多的代码上下文才能够帮助更多 – charlietfl

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

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

来源

2016-11-13 14:59:55 charlietfl

谢谢！这工作！但是，如果我选择下拉值作为AUL并在此“自动＃”字段中输入数据，然后将其下拉值更改为其他值，则此值仍保留“mydata.autoNum”的值，并且当我按下提交此值也传递到后端！ – Geek

然后在控制器中使用手表观察'myData.Type'并在值不正确的情况下删除'autoNum'属性，或者在提交之前进行一些清理。如果你的jQuery工作，你的jQuery会遇到同样的问题 – charlietfl

因此，如果'myData.Type！='AUL'，那么我将清除'autoNum'的值。 – Geek

Jquery free示例。我为你创造了一个蹲下的例子。 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>

来源

2016-11-13 15:12:33

AngularJS和Jquery的混合

回答

相关问题