Angularjsがネストされたスコープ内のモデルとラジオボタンをバインドできません

私のモデルでラジオボタンをバインドできないシナリオがあります。コードラジオボタンは、ng- if.Hereは私のコード私はラジオボタンのいくつかの値がいずれもselected.ngない-場合れるスコープを作成しますので、NG-繰り返しであることを割り当てるときDeviceTypeをのAngularjsがネストされたスコープ内のモデルとラジオボタンをバインドできません

<div ng-if="Type.Value == 'Gadgets'"> 
    <div class="form-group radioChkBtn"> 
     <label class="col-sm-3 control-label">Device Type</label> 
     <div class="col-sm-7"> 
      <div class="radio" ng-repeat="type in Types"> 
       <input type="radio" ng-model="DeviceType" ng-value="{{type.Value}}" id="radioDeviceType{{$index}}" name="devicetype"><label for="radioDeviceType{{$index}}"> {{type.Value}}</label> 
      </div> 

     </div> 
    </div>

値は常にundefined.Evenです。問題を引き起こしているスコープの入れ子になっているかもしれません。どんな助けも本当に感謝しています。

出典

2016-05-17 sqlcte

場合の出力{{}} DeviceTypeを、それは価値がありますか？また、あなたの '{{type.Value}}'をアンラップしてください... ng-valueを使うときは '{{...}}'は必要ありません。 – Tracker1

入力ラジオのために、私はカスタムラジオグリフに 'label> input + span'を使うことができるように、' テキスト 'を好んで使用します。 – Tracker1

@ tracker1はいDeviceTypeを出力すると値があります。 – sqlcte

代わりに、ラジオでモデルを設定してみてください。

があなたのコントローラでこれを持っている：

$scope.onRadioChange = function(newValue) { 
    $scope.DeviceType.value = newValue; 
};

そして、これまであなたのHTMLは、同様ます

<div class="radio" ng-repeat="type in Types"> 
    <input type="radio" ng-model="DeviceType.value" ng-change="onRadioChange(type.Value)" ng-value="type.Value" id="{{type.Id}}" name="myRadios"><label for="{{type.Id}}"> {{type.Value}}</label> 
</div>

だから、それを打破するためにonRadioChange()とき、ラジオボタン、我々は今、スコープ機能をトリガしていますng-changeでクリックします。 type.valueをそれに渡し、関数内でDeviceType.valueというモデルを渡す値と同じにします。

以下の例では、ラジオボタンがクリックされ、選択されたラジオボタンと同じ値を持つと、私はDeviceType.valueを出力していることがわかります。角度問題を回避するには、DeviceTypeの代わりにDeviceType.valueを使用します。

WORKING EXAMPLE

出典

2016-05-17 00:30:12 Fizzix

Fizzixの問題点は、すべてのラジオボタンを1つずつ選択すると、変更イベントはもう発生しないということです。 – sqlcte

@sqlcte - あなたはまさに正しい、素晴らしい発見です。私は今修正を見つけることができ、あなたに戻ってくるのを見るでしょう。 – Fizzix

@sqlcte - すべて固定されています。投稿と更新された例について私の新しいコメントをチェックアウトしてください。単に 'DeviceType'を' DeviceType.value'に変更し、 'DeviceType'のモデル宣言は次のようなオブジェクトになりました：' $ scope.DeviceType = {value = "nothing yet"}; ' – Fizzix

var app = angular.module('myApp', []); 
 
app.controller('formCtrl', function($scope) { \t 
 
\t 
 
\t $scope.devices = [{ 
 
\t \t nameD: "Device 1" 
 
\t \t }, { 
 
\t \t nameD: "Device 2" 
 
\t \t }, { 
 
\t \t nameD: "Device 3" 
 
\t \t }, { 
 
\t \t nameD: "Device 4" 
 
\t }]; 
 
\t 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<body> 
 
<div ng-app="myApp" ng-controller="formCtrl"> 
 
<form> 
 
<ul> 
 
    <li ng-repeat="device in devices"> 
 
\t <label>{{device.nameD}} \t 
 
     <input type="radio" ng-model="$parent.deviceType" value="{{device.nameD}}" />  
 
\t </label> 
 
    </li> 
 
</ul> 
 
<button>Submit</button> 
 
</form> 
 
{{deviceType}} 
 
</div> 
 
</body> 
 
</html>

出典

2016-05-17 00:38:31 sasikaran

これは、OPが何を求めているかとは関係がありません。あなたの答えはフォームの検証に関係しています。彼は単に 'undefined'としてモデルが登場することを尋ねました。 – Fizzix

Angularjsがネストされたスコープ内のモデルとラジオボタンをバインドできません

答えて

関連する問題