爲什麼我需要在AngularJS中輸入名稱和ng-model？

我只是想知道爲什麼我必須在表單的輸入元素上指定name和ng-model才能正確使用它。例如，以下內容：爲什麼我需要在AngularJS中輸入名稱和ng-model？

<form name='test'> 
     <div> 
      <input type='radio' 
       value='create-new' 
       ng-model='toggle' 
       required /> 

      <input type='radio' 
       value='use-existing' 
       ng-model='toggle' 
       required /> 
     </div> 
     <div ng-switch='test.$invalid'> 
      <div ng-switch-when='true'>Invalid!</div> 
      <div ng-switch-when='false'>Valid!</div> 
     </div> 
    </form>

我會得到輸出Invalid!當我不選擇一個單選按鈕 - 這是正確的行爲。然而，缺點是我可以訪問這個模型的唯一方法是通過$scope.toggle - 元素本身不會被$scope.test（表單容器）中的名稱引用。 $scope.test將包含驗證規則toggle，但它會而不是有任何方式讓您知道那些驗證規則屬於toggle作爲名稱不存在。

如果我們打開它周圍擺上輸入一個名稱屬性：

<form name='test'> 
     <div> 
      <input type='radio' 
       value='create-new' 
       name='toggle' 
       required /> 

      <input type='radio' 
       value='use-existing' 
       name='toggle' 
       required /> 
     </div> 
     <div ng-switch='test.$invalid'> 
      <div ng-switch-when='true'>Invalid!</div> 
      <div ng-switch-when='false'>Valid!</div> 
     </div> 
    </form>

然後我們ng-switch底部將始終顯示有效的，即使我已經提到，輸入本身是必需的。此外，toggle現在顯示在$scope.test之內，所以我可以在其他地方檢查$scope.test.toggle的有效性（不需要該元素的內聯屬性）。

如果我結合這兩種方法，並同時使用name和ng-model，那麼這兩個結果合併，我得到的結果，我本來期望 - 我可以看到$scope.test.toggle和模型本身是正確驗證。

我的問題是爲什麼這是適當的行爲？它似乎不同於jquery.validate.unobtrusive，其中name屬性是將驗證規則固有地綁定到元素的位。

來源

2014-10-06 Dan Pantry

name屬性用於角驗證，ng-model結合，

，如果你不打算使用的角度來驗證你不必使用name

，如果你不那麼約束力不使用ng-model

兩者都是必要的，如果您需要在客戶端使用角度驗證並需要綁定

來源

2014-10-06 13:35:38

爲什麼我需要在AngularJS中輸入名稱和ng-model？

回答

相關問題