无法在ng

无法在ng-click功能上获取ng-bind-html下拉值(not able to get ng-bind-html dropdown value on ng-click function)

我是Angularjs的新手，我可以在Jquery中做到这一点，但我想学习angularjs 。

我有下拉使用ng-bind-html获取下拉值并将该值更新为ng-bind-html它工作正常。 但是当我从下拉列表中选择值并在控制台日志中进行控制时，它显示为空。

但是当我用硬编码值更新下拉列表并选择值时，它会在日志中正确显示。

HTML代码：

<div ng-app="myApp"> <div ng-controller="addComplaintCtrl"> <select class="form-control" id="product_name" name="product_name" ng-model="product_name" ng-bind-html="pdl"> <!--<option value="">-Select-</option> <option value='00'>Other</option>--> </select> <input type="button" class="btn btn-primary btn-block" ng-click="complaintSubmitEvent();" value="Submit Complaint"> </div> </div>

角码：

<script> var app = angular.module('myApp',['ngSanitize']); app.controller("addComplaintCtrl",function($scope,$sce){ $scope.pdl=$sce.trustAsHtml('<option value="">-Select-</option><option value="Sales" >Sales</option>'); $scope.complaintSubmitEvent=function(){ //alert(0); console.log($scope.product_name); } }) </script>

下面是jsfiddle链接。 NG绑定，HTML

i new to Angularjs i can do this in Jquery but i want to learn angularjs.

i have dropdown were im using ng-bind-html to get dropdown value and updating that value to that ng-bind-html it is working fine. but when i select the value from dropdown and console it in console log it is showing as null.

but when i update the dropdown with hardcode value and select the value then it is coming correctly on log.

HTML Code:

<div ng-app="myApp"> <div ng-controller="addComplaintCtrl"> <select class="form-control" id="product_name" name="product_name" ng-model="product_name" ng-bind-html="pdl"> <!--<option value="">-Select-</option> <option value='00'>Other</option>--> </select> <input type="button" class="btn btn-primary btn-block" ng-click="complaintSubmitEvent();" value="Submit Complaint"> </div> </div>

Angular Code:

<script> var app = angular.module('myApp',['ngSanitize']); app.controller("addComplaintCtrl",function($scope,$sce){ $scope.pdl=$sce.trustAsHtml('<option value="">-Select-</option><option value="Sales" >Sales</option>'); $scope.complaintSubmitEvent=function(){ //alert(0); console.log($scope.product_name); } }) </script>

below is jsfiddle link. ng-bind-html

最满意答案

您必须编译ng-bind-html所做的更改，您可以创建类似的指令

app.directive('compile',function($compile, $timeout){ return{ restrict:'A', link: function(scope,elem,attrs){ $timeout(function(){ $compile(elem.contents())(scope); }); } }; });

在ng-bind-html完成其工作后， $timeout用于运行编译功能

现在你可以简单地使用ng-bind-html将compile作为select的属性

<select class="form-control" id="product_name" name="product_name" ng-model="product_name" ng-bind-html="pdl" compile >

工作小提琴

You have to compile the change made by ng-bind-html you can create a directive something like

app.directive('compile',function($compile, $timeout){ return{ restrict:'A', link: function(scope,elem,attrs){ $timeout(function(){ $compile(elem.contents())(scope); }); } }; });

$timeout is used to run compile function, after ng-bind-html do its job

Now you can just simply put compile as attribute of select with ng-bind-html

<select class="form-control" id="product_name" name="product_name" ng-model="product_name" ng-bind-html="pdl" compile >

Working fiddle