5

angular jsでng-disabledに複数の値を設定するにはどうすればよいですか?

私の問題は、次の JS フィドルで説明されています: http://jsfiddle.net/FJf4v/10/ 

    <div ng-app>
<div ng-controller="myCnt">

    <h3>A ->> <input type="checkbox" ng-model="check"> </input></h3>
    <h3>B ->> <input type="checkbox" ng-model="check"> </input></h3>  

    <br/>
    <input type="checkbox" ng-disabled="check">Chkbox1 to be disabled</input>
    <input type="checkbox" ng-disabled="check">Chkbox2 to be disabled</input>
    <hr/>
</div>
</div>

Javascript:
function myCnt($scope) {
//
}

このフィドルには、A、B、Chkbox1、Chkbox2 というラベルの付いた合計 4 つのチェック ボックスがあります。私が探しているのは、A と B のチェックボックスのいずれかをチェックした後、chkbox1 と chkbox2 の両方を無効にすることです。しかし、それは中途半端に行われました。A または B のいずれかをクリックすると、両方のボタンがチェックされ、下のチェックボックスが無効になります。しかし、A と B のチェックボックスのいずれかをクリックするだけで、両方のチェックボックスをオンにしたくありません。

あなたが私の質問を理解してくれることを願っています。

ありがとうございました ！！

4

2 に答える 2

6

したがって、コメントで述べたように、チェックボックスの非常に長いリストでこれを実現したい場合は、次の方法を試すことができます: (この例では、「非常に長い」は 10 を意味します)

モデル
チェックボックスのすべての値を含む単純なオブジェクトを使用できます。これは ng-repeat を使用して行いましたが、何でも構いません。同じ iterable オブジェクトを使用するだけです。

<input type="checkbox" ng-repeat="nb in [1,2,3,4,5,6,7,8,9,10]" ng-model="checkModels[nb]" /></h3>

このオブジェクトはコントローラーで初期化されます。値は指定しませんでしたが、たとえば、ここでいくつかのチェックボックスを設定できます。

$scope.checkModels={};

||
の長いリストの代わりに、ここでは特に難しいことはありません。値、モデルを反復処理し、チェック ボックスが見つかるとすぐに true を返します。

    $scope.isThisDisabled=function(){
     for(var i in $scope.checkModels)
     {
         if($scope.checkModels[i])
             return true             
     }
    return false;
}

次に、この関数を HTML で使用できます。

<input type="checkbox" ng-disabled="isThisDisabled()">Chkbox1 to be disabled</input>

これをテストするために修正されたフィドル: http://jsfiddle.net/DotDotDot/FJf4v/12/

楽しむ

于 2013-08-16T15:14:46.013 に答える