angularJS複選框未更新模型

我有一個複選框形式，我想檢查提交值：angularJS複選框未更新模型

HTML：

 <form class="form-horizontal" role="form" name="AddUserForm" ng-submit="submit(AddUserForm)"> 
      ... 
      <div class="form-group"> 
       <label for="adduser-email" class="col-xs-2 col-xl-2 control-label">email</label> 
       <div class="col-xs-10 col-xl-10"> 
        <input type="email" placeholder="email" id="adduser-email" ng-model="AddUserForm.email" required> 
       </div> 

      </div> 
      <div class="col-xs-12 col-xl-12"> 
       <input id="adduser-mailinglist" type="checkbox" ng-model="AddUserForm.mailinglist">Add to mailing list</input> 
      </div> 
      <div class="form-group"> 
       <div class="col-xs-offset-2 col-xs-10 col-xl-offset-2 col-xl-10"> 
        <button class="blue-button" type="submit" class="btn btn-default">Add User</button> 
       </div> 
      </div> 
     </form>

的JS：

$scope.submit = function(AddUserForm) { 
     console.log(AddUserForm.mailinglist); 
    };

我「M得到undefined

文本輸入是精細和存在於表格模型

發了plunkr： http://plnkr.co/edit/NKow0isUCp8PZy90drmA

來源

2014-11-21 Boaz

將是很好，如果你可以創建一個小提琴左右。在與複選框交互之後會發生這種情況嗎？也許你需要爲模型分配一個初始值。 – kubuntu 2014-11-21 20:06:39

'console.log（AddUserForm）'是否在控制檯中顯示任何內容？ – Blazemonger 2014-11-21 20:28:32

是的。表單中文本元素的值是正確的。只有複選框值丟失 – Boaz 2014-11-21 20:29:15

更新答案：

演示：http://jsfiddle.net/0ukwaug4/

這裏的更新HTML，更新提交（AddUserForm）可以只提交（），對象已被定義範圍等級：

 <form class="form-horizontal" role="form" name="AddUserForm" ng-submit="submit()"> 
      ... 
      <div class="form-group"> 
       <label for="adduser-email" class="col-xs-2 col-xl-2 control-label">email</label> 
       <div class="col-xs-10 col-xl-10"> 
        <input type="email" placeholder="email" id="adduser-email" ng-model="AddUserForm.email" required> 
       </div> 

      </div> 
      <div class="col-xs-12 col-xl-12"> 
       <input id="adduser-mailinglist" type="checkbox" ng-model="AddUserForm.mailinglist">Add to mailing list</input> 
      </div> 
      <div class="form-group"> 
       <div class="col-xs-offset-2 col-xs-10 col-xl-offset-2 col-xl-10"> 
        <button class="blue-button" type="submit" class="btn btn-default">Add User</button> 
       </div> 
      </div> 
     </form>

的JavaScript：

$scope.submit = function() { 
     console.log($scope.AddUserForm.mailinglist);  
    };

未選中時，您將獲得undefined，但在選中時將爲true。

來源

2014-11-21 20:25:29

即使我檢查了 – Boaz 2014-11-21 20:27:37

已更新的答案，以包含工作演示，我仍未定義。 – 2014-11-21 20:51:17

在我plukr爲好，事情是，在原代碼甚至是選中的複選框給我不確定......奇怪... – Boaz 2014-11-21 21:04:33

你只需要初始化複選框的模型在你的控制器：

$scope.mailinglist = false;

plunkr

來源

2014-11-21 21:10:56 Blazemonger

我同意你的說法，plunkr的作品...我原來的代碼沒有。它可能與臉部有關，它是一種模態實例？ – Boaz 2014-11-21 21:21:42

不，這只是Angular中複選框模型的一個非常不尋常的問題，我認爲它應該被修復。如果你點擊它然後再次點擊並提交，它會以「假」的形式出現。看來$範圍沒有看到它，除非它被設置（如上）或更改。 @Boaz – 2015-10-22 19:33:32

正如其他人已經提供了工作plnkr，我只想讓你知道爲什麼你的原來沒有工作。在不使用點符號創建屬性時，即mailinglist而不是AddUserForm.mailinglist，您正在視圖的作用域上創建此屬性，而不是獲取控制器的作用域。使用點符號或控制器作爲控制器的範圍。

看看這個視頻由Egghead.IO一個更透徹的解釋： AngularJS - The Dot

來源

2014-11-21 21:35:46 Owen

這是一個很好的觀點，歐文。確實最初的代碼是AddUserForm.mailinglist。郵件列表版本是爲了確保沒有問題的形式模型 – Boaz 2014-11-21 21:39:03

啊，我是在你原來的職位上的plnkr。在那個plnkr中，你在控制器中定義了'$ scope.mailinglist'，但在視圖中只定義了'mailinglist'。這是創建'mailinglist'的子範圍版本的原因。就點符號版本而言，如果您尚未將「AddUserForm.mailinglist」定義爲true或false，則它將解析爲未定義，直到第一個模型更改。這只是JavaScript的喜悅。簡單的方法是初始化'AddUserForm'的值，使'.mailinglist'爲false。 – Owen 2014-11-21 21:48:18

謝謝。修復了以後參考的plunkr – Boaz 2014-11-22 08:29:33

angularJS複選框未更新模型

回答

相關問題