AngularJS指令爲「html select required」

另一天有另一個問題。我正在再次在我的Web應用程序上工作。現在我遇到了問題。主要瀏覽器（http://www.w3schools.com/tags/att_select_required.asp）不支持「必需」屬性，它僅在第一個選項值爲空時起作用。那麼工作正常，如果表單是$無效的，並且它是由「請選擇」留下的時候，則提交事件不會執行任何操作。
AngularJS指令爲「html select required」

Land*:<br /> 
       <select id="countries" name="country" data-ng-model="contact.country" required required-select> 
        <option value="">Please select</option> 
        <script type="text/javascript"> 
         $(document).ready(function() { 

          var countries = {}; 
          if (countries.length > 0) { 
           return countries; 
          } else { 
           $.get('WebKalkTool/country_de.xml', function(data) { 
            countries = data; 
            var that = $('#countries'); 
            $('name', countries).each(function() { 
             $('<option />', { 
              text: $(this).text(), 
             }).appendTo(that); 
            }); 
           }, 'xml'); 
          } 

         }); 
        </script> 
       </select> 
       <span class="error" data-ng-show="mandatory">Please select an item</span> 
      </p>

我正在尋找是檢查是否爲空值指令，然後顯示錯誤後提交，如果他們選擇一個項目，該錯誤消失。

現在指令也許應該是這個樣子：

authApp.directive('requiredSelect', function() { 
return { 
    require: 'select', 
    link: function (scope, formElement, attr, formSelect) { 

     console.log('FORM : Linker called'); 
     console.log(formSelect); 
     console.log(formSelect.selected.value); // is undefined.. 



     scope.$watch(formSelect.selectedIndex.value, function() { 
      console.log("index changed"); // Always log when another index is selected 
      if (formSelect.selectedIndex.value == "") { 
       console.log("value=""); 
// only show error after submit OR has visited on span id mandatory (or add new template? 
// Tell the form, it's invalid, select is invalid 
      } else if (formSelect.selectedIndex.value != "") { 
       console.log("index > 0"); 
// everything is fine, select is valid 
      } else { 
       console.log("FORMSELECT.SELECTINDEX = UNDEFINED"); 
// just 4 testing my link 
      } 
     }); 

    } 
};

}）;

因爲兼容性想法和HTML5驗證，我拿出了HTML5驗證，無論如何只顯示第一個提示。
它應該與輸入字段的'required'屬性相同，並且工作方式相同，我不想讓我的提交按鈕被禁用。也許我也可以刪除這個「請選擇」選項並將其留空。

或者，也許我只是不那麼聰明足夠做喜歡的事，等於：

<span class="error" data-ng-show="requestForm.place.hasVisited && requestForm.place.$invalid">Required!</span>

如果我們檢查值或將selectedIndex，什麼都無所謂。

感謝您的幫助，並認爲
炭疽

來源

2013-10-17 Anthrax

AngularJs已經知道如何處理所需要的屬性（見here）。當你的形式和/或選擇標記由角或提交按鈕點擊後爲無效

<form name="myForm"> 
    <select name="country" 
     ng-model="country" 
     ng-options="c.name for c in countries" 
     required> 
    <option value="">-- chose country --</option> 
    </select> 
</form>

然後由你來顯示錯誤消息：在你的情況，你可能想要做類似的東西。

// Inline validation appears directly when select value is empty 
<span class="error" ng-show="myForm.country.$error.required">Required!</span> 

// Or after a click on submit, assuming you have set a boolean to show/hide error 
<span class="error" ng-show="validationFailed">Required!</span>

我已經組裝了一個工作示例，其中有兩種可能性here。

來源

2013-10-17 09:30:37

問題是，我不想讓它與ng-options一起使用，因爲我也選擇了具有2個硬編碼值的選項。儘管我需要將我的國家用xml保存到一個變量中，但是這怎麼回事^^ – Anthrax

無論ng-options裏面的內容是什麼，都將有益於Angular的雙向數據綁定。這意味着您可以從一個空數組開始，然後用來自服務器的數據填充它。爲了演示這個，我修改了這個plunker並添加了一個Add Country功能。這與您在接收數據時需要做的事情大致相同。希望這可以幫助。 –

AngularJS指令爲「html select required」

回答

相關問題