無線電綁定的不是角

工作採用NG-重複我在編輯表單顯示一些電臺的：無線電綁定的不是角

<label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first"> 
    <input type="radio" name="gender" value="{{gender.Id}}" data-ng-model="customerFormData.customer.Gender.Id" />{{gender.Description}} 
</label>

正如你所看到的，我申請了「點實踐」。編輯表單是我的詳細信息表單上的一個彈出式窗口。在我的具體形式我有這樣的：

<tr> 
    <td>Gender:</td> 
    <td>{{ customer.Gender.Description }} </td> 
</tr>

我所有的綁定在編輯形式工作，但我不能讓兩性的結合工作。我認爲這與通過使用ng-repeat繼承範圍有關。

我還試圖用$parent，但結果是一樣的：

<label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first"> 
    <input type="radio" name="gender" value="{{gender.Id}}" data-ng-model="$parent.customerFormData.customer.Gender.Id" />{{gender.Description}} 
</label>

設置初始價值的作品。選擇女性時，選擇女性收音機，選擇男性收音機。

第二個問題是（我認爲它與綁定有關），是當選擇男性時，我必須在女性上點擊兩次才能選擇女性。

編輯：我創建了一個Fiddle來說明我的問題。

來源

2013-06-20 Martijn

你可以準備一個笨重的代碼？ – callmekatootie

@callmekatootie我添加了一個小提琴。查看我更新的帖子 – Martijn

一種解決方案是使用ng-value（其評估其內容作爲表達）並將其設置爲整個性別對象，組NG-模式向性別對象在FormData上。這樣，當您更改輸入時，性別對象將設置爲FormData.Gender，並且您可以訪問Id和Descr。

<label ng-repeat="gender in genders">  
    <input type="radio" name="gender" ng-value="gender" ng-model="customer.FormData.Gender"> 
    {{gender.Descr}} 
</label>

http://jsfiddle.net/ADukg/3194/

如果您只想標識在模型中，你可以使用：（價值評估其作爲字符串內容）

<label ng-repeat="gender in genders"> 
    <input type="radio" name="gender" value="{{gender.Id}}" ng-model="customer.FormData.Gender.Id"> 
    {{gender.Descr}} 
</label>

和Controller：

$scope.customer.FormData.Gender = {Id : $scope.genders[1].Id};

http://jsfiddle.net/ADukg/3195/

奇怪的是，當您將值和模型設置爲Id時，它不起作用，但最初將整個性別對象綁定到性別模型。奇怪的！

來源

2013-06-20 09:08:56 Narretz

非常感謝。我喜歡這種方法。你能解釋爲什麼'ng-value'正在工作，而'value'不工作？你怎麼知道「ng值」？它沒有在文檔中提到..（怪異？）。 – Martijn

是的，它是缺少的，對文檔頁面的第一評論談論它。 ng-value將它的內容評估爲一個表達式，value只是將它看作一個字符串。 – Narretz

謝謝你的第二個小提琴，但我更喜歡第一個。謝謝（你的）信息！ – Martijn

我無法100％準確地解釋它。但是你的範圍內有太多的嵌套對象！

請看下面的例子（小提琴：http://jsfiddle.net/ADukg/3193/）

<div ng-controller="MyCtrl"> 
    <label ng-repeat="gender in genders"> 
     <input type="radio" name="gender" value="{{ gender.Id }}" ng-model="$parent.selectedGenderId">{{gender.Descr}} 
    </label> 
</div> 

function MyCtrl($scope) { 
    $scope.genders = [{Id: 1, Descr:'Male'}, {Id:2, Descr:'Female'}]; 
    $scope.selectedGenderId = $scope.genders[1].Id; 

    $scope.$watch('selectedGenderId', function(newValue, oldValue) { 
     console.log("selectedGenderId=" + newValue); 
     // TODO: set it into FormData? 
    }); 
}

如果設置了「selectedGenderId」直接也將正確設置。

我認爲選擇問題與直接綁定無關，而是通過許多對象與作用域的範圍和嵌套無關。

採取也看這樣的解釋： http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

來源

2013-06-20 09:05:11 DanEEStar

感謝您的回覆和文章鏈接。然而，我選擇了Narretz解決方案，因爲我認爲這更清潔。 – Martijn

問題在於單選按鈕上的綁定。您對customer.FormData.Gender.id模型具有約束力 - 請注意，您綁定的是id屬性，而不是Gender屬性。

因此，當您爲男性選擇單選按鈕時，只會更改性別上的ID - 而不是Descr字段。 This解釋清楚行爲。當你選擇不同的單選按鈕時，注意只有ID被更新，而不是Desc。

要更改Descr字段，您需要明智地爲單選按鈕設置專用模型，然後響應此模型的更改。

這在this小提琴演示。

來源

2013-06-20 09:27:24 callmekatootie

好解釋 – DanEEStar

Thans的解釋，但第一個小提琴（http://jsfiddle.net/XF425/）仍然是壞的。當你檢查男性時，它可以工作，但是..當你再次點擊女性時，沒有任何反應。該值僅在第一次點擊時更新，然後被破壞。你能解釋一下爲什麼嗎？ – Martijn

無線電綁定的不是角

回答

相關問題