私は<strong>Angularjs</strong>に新しいngのクリック機能

Question

にNG-バインドHTMLのドロップダウン値を取得することはできません私はjqueryのでこれを行うことができますが、私はangularjsを学びたいと思っています。

私はng-bind-htmlを使ってドロップダウンの値を取得し、その値をng-bind-htmlに更新していましたが、うまくいきました。 しかし、私はドロップダウンから値を選択し、コンソールログでそれがnullとして表示されます。

ハードコード値でドロップダウンを更新して値を選択すると、正しくログに記録されます。

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

Answer 1

selectの属性としてng-bind-htmlでコンパイルするだけです。

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

Working fiddle

Answer 2

あなたがng-bind-htmlを使用したくない場合にも、動的にng-repeatを使用してselectにoptionsを追加することができます。ここでは、作業コードは次のとおりです。

<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