Question

我 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>

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>

下面是jsfiddle链接。 ng-bind-html

Answer 1

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

的指令

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

在$timeout完成其工作

之后，

ng-bind-html用于运行编译功能

现在你可以简单地使用ng-bind-html

将compile作为select的属性

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

Working fiddle

Answer 2

如果您不想使用options，还可以使用select向ng-repeat动态添加ng-bind-html。这是工作代码：

<div ng-app="myApp">
<div ng-controller="addComplaintCtrl">
<select class="form-control" id="product_name" name="product_name" ng-model="product_name">
      <option ng-repeat="d in dropdownData" value="{{d.value}}">{{d.name}}</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.dropdownData = [{name:'-select-', value:''},{name: 'sales', value:'sales'}];

    $scope.complaintSubmitEvent=function(){
        //alert(0);
        console.log($scope.product_name);

    }
});
</script>

Fiddle

无法在ng-click函数

2 个答案: