1つのチェックボックスをオンにするだけです。

角度を使用しているIm。グループに3つのチェックボックスがあり、そのうちの1つだけを確認できるようにしたいと思います。だから1つがチェックされていれば、他の2つは解凍されていなければならない。私はネイティブJSまたはjQueryでこれをいくつかの方法で考えることができますが、私はそれを行う典型的な角度の方法があるかどうかを知りたいです。1つのチェックボックスをオンにするだけです。

ここには、チェックボックスと角度制御を設定したPlunkerがあります。あなただけのラジオボタンを使用していないのはなぜ http://plnkr.co/edit/IZmGwktrCaYNyrWjfSqf?p=preview

<body ng-controller="MainCtrl"> 
 

 
    <div> 
 
    {{vm.Output}} 
 

 
    <br> 
 
    <br> 
 
    <br> 
 
    <label> 
 
     <input type="checkbox" name="groupA" ng-model="vm.a1" ng-change="vm.changeGroupA()"> A1 </label> 
 
    <label> 
 
     <input type="checkbox" name="groupA" ng-model="vm.a2" ng-change="vm.changeGroupA()"> A2 </label> 
 
    <label> 
 
     <input type="checkbox" name="groupA" ng-model="vm.a3" ng-change="vm.changeGroupA()"> A3 </label> 
 

 
    <br> 
 
    <br> 
 
    <br> {{vm.Output}} 
 
</body>

出典

2016-10-07 Lautaro

はずのあなたがラジオボタンを使用します？そのうちの1つだけを確認できる場合は？ http://plnkr.co/edit/uXoLoqO4gap0Xg9SpTle?p=preview –

私はそれを試しましたが、いいえ。タスクの詳細のためです。ラジオボタンはチェックされず、モデルには「選択されていない」ラジオボタンの余地がありません。 – Lautaro

正直なところ、4番目のラジオボタンのためのスペースを確保するためにデザインを変更すると、このためにチェックボックスを使用するのがはるかに意味があります。 – Quentin

、私はこのplnkrを作りました：

<label> <input type="checkbox" name="groupA" ng-model="vm.a1" ng-change="vm.a2 = false; vm.a3 = false; vm.changeGroupA()" > A1 </label> 
<label> <input type="checkbox" name="groupA" ng-model="vm.a2" ng-change="vm.a1 = false; vm.a3 = false; vm.changeGroupA()" > A2 </label> 
<label> <input type="checkbox" name="groupA" ng-model="vm.a3" ng-change="vm.a2 = false; vm.a1 = false; vm.changeGroupA()" > A3 </label>

http://plnkr.co/edit/apSE3cIXA7DIvulBfNGX?p=previewはそれが=をホープ）

編集：コントローラー内の他のチェックボックスの状態を、ベストプラクティスのために変更することができます。これはhtmlで作成したもので、より迅速にデモを行うことができます。

出典

2016-10-07 14:35:13

ブリリアント！私はそれを行う良い角度の方法があることを知っていた。わたしは、あなたを愛しています。 – Lautaro

答えはまだ受け入れられていません。でも私はする。 – Lautaro

-1

？あなたはラジオボタンを使用することはできませんので、あなたは他の人が選択解除されているものをチェックするとき

<label> 
    <input type="radio" name="groupA" ng-model="vm.a1" ng-change="vm.changeGroupA()"> A1 </label> 
<label> 
    <input type="radio" name="groupA" ng-model="vm.a2" ng-change="vm.changeGroupA()"> A2 </label> 
<label> 
    <input type="radio" name="groupA" ng-model="vm.a3" ng-change="vm.changeGroupA()"> A3 </label>

出典

2016-10-07 14:30:10

私はそれを試しましたが、いいえ。タスクの詳細のためです。ラジオボタンはチェックされず、モデルには「選択されていない」ラジオボタンの余地がありません – Lautaro

申し訳ありませんが、あなたはおそらく元の質問に入れておくべきです。 –

難しい方法があります。 http://plnkr.co/edit/A53w4IJMRXQmvRsxa8JAと、それはそれを行うための別の方法は次のようになり

changeGroupA : function (x) { if (x === 'A1'){ $scope.vm.a1 = true; $scope.vm.a2 = false; $scope.vm.a3 = false; } else if (x === 'A2') { $scope.vm.a2 = true; $scope.vm.a1 = false; $scope.vm.a3 = false; } else if (x === 'A3') { $scope.vm.a3 = true; $scope.vm.a1 = false; $scope.vm.a2 = false; } this.Output = '(' + this.count + ')' + this.Output; this.count ++; },

出典

2016-10-07 14:53:22 Gary

を動作するはずです：http://plnkr.co/edit/kH12pYkXfY6t6enrlSns

<br><br><br> 
    <label> <input type="checkbox" name="groupA" ng-model="vm.groupA[0]" ng-change="vm.changeGroupA(0)" > A1 </label> 
    <label> <input type="checkbox" name="groupA" ng-model="vm.groupA[1]" ng-change="vm.changeGroupA(1)" > A2 </label> 
    <label> <input type="checkbox" name="groupA" ng-model="vm.groupA[2]" ng-change="vm.changeGroupA(2)" > A3 </label> 

    <br><br><br>

コントローラは次のようになります。

$scope.vm = { 

    groupA: [false, true, false], 
    count : 0, 

    changeGroupA : function (index) 
    { 


    for (i = 0, len = this.groupA.length; i < len; ++i) { 
     this.groupA[i] = ((1 << index) & (1 << i)) > 0; 
    } 


    this.Output = '(' + this.count + ')' + this.Output; 
    this.count ++; 

    }, 

    Output : 'Here we go' 

}

出典

2016-10-07 16:27:14

1つのチェックボックスをオンにするだけです。

答えて

関連する問題