2013-03-12 13 views
57

以下は私のコードスニペットです。角度を使ってドロップダウンを検証したい AngularJSドロップダウンが必要です。

<td align="left" width="52%"> 
    <span class="requiredSmall">*</span> 
    <select class="Sitedropdown" style="width: 220px;" 
      ng-model="selectedSpecimen().serviceID" 
      ng-options="service.ServiceID as service.ServiceName for service in services"> 
     <option value="" ng-selected="selected">Select Service</option> 
    </select> 
</td> 

有効な手段:

有効な値は、何もすることなく、 "サービスの選択"、それは私のデフォルト値であることができます。他のASP.netと同じように、フィールドバリデーターが必要です。DefaultValue = "0"はドロップダウンのため、私のドロップダウンはサービスからバインドされ、 "Select Service"以外のすべての値を選択します。

答えて

113

あなたは、あなたがrequired属性を追加し、その後、あなたがmyForm.[input name].$error.requiredを使用してエラーを参照することができる必要がある、あなたのドロップダウンリストに「名前」属性を追加する必要があります。

HTML:

<form name="myForm" ng-controller="Ctrl"> 

    <select name="service_id" class="Sitedropdown" style="width: 220px;"   
      ng-model="ServiceID" 
      ng-options="service.ServiceID as service.ServiceName for service in services" 
      required> 
    <option value="">Select Service</option> 
    </select> 
    <span ng-show="myForm.service_id.$error.required">Select service</span> 

</form> 

コントローラ:

function Ctrl($scope) { 
    $scope.services = [ 
    {ServiceID: 1, ServiceName: 'Service1'}, 
    {ServiceID: 2, ServiceName: 'Service2'}, 
    {ServiceID: 3, ServiceName: 'Service3'} 
    ]; 
} 

はここで働いてplunkerです。

+7

これが機能するには、selectが必要です。 – phikes

+3

正しい、ngOptionsにはngModelが必要です。 – Stewie

+0

この例は非常に便利です。ありがとうございます。 – ddagsan

関連する問題