角度NGリピートjqueryのラジオボタンと混合し、checked属性

を使用してデフォルト値を選択します。角度NGリピートjqueryのラジオボタンと混合し、checked属性

http://codepen.io/kk20994/pen/ygvQQO

HTML

<div ng-app="app" ng-controller="MainController" class="container"> 
    <form class="form row"> 
    <div class="form-group" ng-repeat="radio in radioGroups"> 
     <label for="{{radio.id}}">{{radio.label}}</label> 

     <div class="radio"> 
     <label> 
    <input type="radio" name="optionsRadios_{{radio.id}}" id="optionsRadios_default" value="" checked> 
    Not Sure 
    </label> 
     </div> 
     <div class="radio" ng-repeat="value in radio.values"> 
     <label> 
    <input type="radio" name="optionsRadios_{{radio.id}}" id="optionsRadios_{{radio.id}}_{{value.key}}" value="{{value.key}}"> 
    {{value.label}} 
    </label> 
     </div> 
    </div> 
    </form> 
</div>

Javascriptを：

angular.module("app", []) 
.controller('MainController', function($scope){ 
    $scope.radioGroups = [{ 
    id: 1, 
    label: "Is this fissible in rural area?", 
    values: [{ 
     key: "true", 
     label: "True" 
    },{ 
     key: "false", 
     label: "False" 
    }] 
    },{ 
    id: 2, 
    label: "Is this for all students of district?", 
    values: [{ 
     key: "true", 
     label: "True" 
    },{ 
     key: "false", 
     label: "False" 
    }] 
    }]; 
});

出力：

したがって、2つのラジオボタングループのIDと名前が異なる場合でも、動作しません。 DOMをチェックしても、最初のラジオボタンのプロパティが「チェック」されている場合はfalseです。

注DOMを変更することはできませんが、DOMのレンダリング後にjqueryなしですべてのラジオボタンについてデフォルト値をチェックしたいと考えています。

出典

2017-02-01 user3912732

angular jsでラジオボタンを選択するにはng-modelプロパティをng-repeatにする必要があります。ラジオボタンの値を設定するには、の中に追加のフィールドvalueを配置しました。

も値が任意の式が含まれていないので、代わりにあなたがng-valueを使用することはできませんわからない選択で最初のラジオボタンについてng-value="value.key"

を使用することができますvalue="{{value.key}}"を使用する必要はありません。直接初期化することができます。value=""

添付の作業コードです。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script> 
 
     angular.module("app", []) 
 
      .controller('MainController', function ($scope) { 
 
       $scope.radioGroups = [ 
 
        { 
 
         id: 1, 
 
         label: "Is this fissible in rural area?", 
 
         values: [{ key: "true", label: "True"}, 
 
           { key: "false", label: "False"} 
 
           ], 
 
         value: "" 
 
        }, 
 
        { 
 
         id: 2, 
 
         label: "Is this for all students of district?", 
 
         values: [{ key: "true", label: "True"}, 
 
           { key: "false", label: "False" } 
 
           ], 
 
         value: "" 
 
        }]; 
 
      }); 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <div ng-app="app" ng-controller="MainController" class="container"> 
 
     <form class="form row"> 
 
      <div class="form-group" ng-repeat="radio in radioGroups"> 
 
       <label for="{{radio.id}}">{{radio.label}}</label> 
 

 
       <div class="radio"> 
 
        <label> 
 
         <input type="radio" name="optionsRadios_{{radio.id}}" ng-model="radio.value" id="optionsRadios_default" value=""> Not Sure 
 
        </label> 
 
       </div> 
 
       <div class="radio" ng-repeat="value in radio.values"> 
 
        <label> 
 
         <input type="radio" name="optionsRadios_{{radio.id}}" ng-model="radio.value" id="optionsRadios_{{radio.id}}_{{value.key}}" ng-value="value.key"> {{value.label}} 
 
        </label> 
 
       </div> 
 
      </div> 
 
     </form> 
 
    </div> 
 

 
</body> 
 

 
</html>

スコープ変数内のすべてのオブジェクトのvalue: ""セット、わからないがデフォルトで選択されますので。選択内容を変更する必要に応じて値を変更することができます。

出典

2017-02-01 07:19:09 Nitheesh

角度NGリピートjqueryのラジオボタンと混合し、checked属性

答えて

関連する問題