我是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
更多推荐
发布评论