BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] AngularJsです。ラジオボタンのリストにng-modelをバインドする

2022-03-14 03:37:14

質問

ラジオボタンのリストで選択された値を ng-model

持っています。 

<!DOCTYPE html>

<html ng-app="testApp">
    <head>
        <script src="./bower_components/angular/angular.min.js"></script>
        <script src="test.js"></script>
    </head>
    <body ng-controller="testController">
        <form>
            <div ng-repeat="option in occurrenceOptions">
                <input type="radio" name="occurrence" ng-value="option" ng-model="selectedOccurrence" /><label>{{ option }}</label>
            </div>
        </form>
        <div>The selected value is : {{ selectedOccurrence }}</div>

        <!-- This works -->
        <input type="radio" ng-model="selected2" ng-value="'1'"> 1
        <input type="radio" ng-model="selected2" ng-value="'2'"> 2
        <input type="radio" ng-model="selected2" ng-value="'3'"> 3

        <div>This selected value is : {{ selected2 }} </div>
    </body>
</html>

私のコントローラー用。 

(function () {

    var app = angular.module('testApp', []);

    app.controller('testController', function($scope) {
        $scope.occurrenceOptions = [];

        $scope.occurrenceOptions.push('previous');
        $scope.occurrenceOptions.push('current');
        $scope.occurrenceOptions.push('next');

        $scope.selected2;
    });
}());

最初のセクションで、私はすべての occurrenceOptions を作成し、それらをすべて同じモデルにバインドしています。しかし、何かを選択するたびに selectedOccurrence の値は変更されません。

plunkrを参照してください。 https://plnkr.co/edit/k1pMgkLdrMUG1blktQx1?p=preview

を使用せずに ng-repeat と、すべてのラジオボタンを打ち出すだけで、これを動作させることができるようになりました。なぜ ng-repeat のバージョンが動作しないのでしょうか？

解決方法を教えてください。

うまくいかない理由は、あなたが ng-repeat を定義しています。 ng-model 変数が含まれています。その方法は ng-repeat は、コレクションの繰り返しごとに新しい子スコープ（プロトタイプ的に継承される）を作成します。そのため ng-model に存在する ng-repeat テンプレートは、その新しく作成されたスコープに属します。ここで ng-model="selectedOccurrence" 作成 selectedOccurrence の各反復でスコープ変数 ng-repeat .

このような問題を克服するためには、次のようにする必要があります。 dot rule AngularJSでモデルを定義している間

マークアップ 

<body ng-controller="testController">
  <form>
    <div ng-repeat="option in occurrenceOptions track by $index">
      <input type="radio" name="occurrences" ng-value="option" ng-model="model.selectedOccurrence" />
      <label>{{ option }}</label>
    </div>
  </form>
  <div>The selected value is : {{ model.selectedOccurrence }}</div>
</body>

コード 

$scope.model = {}; //defined a model object
$scope.model.selectedOccurrence = 'current'; //and defined property in it

デモ Plunkr

または、もう1つの望ましい方法として controllerAs パターンを使用し、コントローラを宣言します。 this の代わりに $scope コントローラ内)。

HTML 

<body ng-controller="testController as vm">
    <form>
        <div ng-repeat="option in vm.occurrenceOptions">
            <input type="radio" name="occurrence" ng-value="option" ng-model="vm.selectedOccurrence" /><label>{{ option }}</label>
        </div>
    </form>
</body>

ControllerAsデモ

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します