クリックしてチェックボックスのリストを停止

私はangularJSでng-repeatチェックボックスを持っていました。ライブラリcheckboxlistを使用して、ng-repeatで複数のチェックボックスを実装しています。ユーザーがチェックボックスの最大数をクリックできるという要件がありました。私は$ event.stopPropagationを使用しましたが、動作しますが、チェックボックスリストにアクセスする方法がわからないので、モデルは更新されません。私は第三のチェックボックスを選択するとクリックしてチェックボックスのリストを停止

コントローラ

$scope.mealCBChanged = function($event, mc){ 
    if(mc.selectedCBId.length > 2){ 
     $event.preventDefault(); 
     alert("You can't select more than " + 2); 
    } 
}

HTML

<div ng-repeat="mc in mealC"> 
<div ng-repeat="m in mc.meals"> 
    <input type="checkbox" name="{{ m.id }}" 
     id="{{ m.name }}" 
     checklist-model="mc.selectedCBId" 
     ng-init="mc.selectedCBId = []" 
     ng-click="mealCBChanged($event, mc)" 
     checklist-value="m.name"/> 
    <label for="{{ m.name }}"><span class="checkbox primary primary"><span></span></span>{{ m.name }}</label> 
</div> 
</div>

問題

は、アラートが起動され、トン$ event.preventDefault（）が正常に動作しているため、hirdチェックボックスがクリックされません。しかし、mc.selectedCBIdは配列内に3つの項目を持っています。おそらく2つの項目があります。

出典

2017-06-01 Abel Chun

あなたは第四のチェックボックスを選択した場合、mc.selectedCBIdは、配列内の3つのまたは4のアイテムを持っているのだろうか？ –

@GaliloGalilo mc.selectedCBIdは、チェックボックスをクリックするとアイテムを継続的に追加します。 –

から純粋な角のパースペクティブ - チェックボックスリストに頼るのではなく、次のようなものを試すことができます：

EDIT：ネストされたngRepeatsを追加し、tのスコープを移動しました彼はcheckCountを各mealCノードに追加し、OPがネストされたデータをサードパーティ製のライブラリに頼るのではなく、純粋な角度を使ってチェックボックスを使って動作させる方法を理解できるようにしました。サードパーティライブラリは時々大変ですが、単純なニーズに必要以上にオーバーヘッドを追加することがあります。

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

 
//myApp.directive('myDirective', function() {}); 
 
//myApp.factory('myService', function() {}); 
 

 
function MyCtrl($scope) { 
 
    $scope.mealC = [ 
 
    { 
 
     checkCount: 0, 
 
     meals: [{ id: 1, name: "foo" }, { id: 2, name: "bar" }, { id: 3, name: "baz" }] 
 
    }, { 
 
     checkCount: 0, 
 
     meals: [{ id: 11, name: "gravy" }, { id: 12, name: "cake" }, { id: 13, name: "beer" }] 
 
    } 
 
    ]; 
 
    
 
    $scope.clicked = function(state, meal) { 
 
    !!state ? meal.checkCount++ : meal.checkCount--; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp"> 
 
<div ng-controller="MyCtrl"> 
 
    <div ng-repeat="mc in mealC"> 
 
    <p> 
 
     There are currently {{mc.checkCount}} selected checkboxes in this section! 
 
     <div ng-repeat="m in mc.meals"> 
 
     <input type="checkbox" id="{{ m.id }}" name="{{ m.name }}" ng-model="m.checked" ng-value="m.name" ng-change="clicked(m.checked, mc)" ng-disabled="mc.checkCount >= 2 && !m.checked" /> 
 
     <label for="{{ m.name }}"><span class="checkbox primary primary"><span></span></span>{{ m.name }}</label> 
 
     </div> 
 
    </p> 
 
    </div> 
 
</div> 
 
</body>

出典

2017-06-01 03:00:48 Paurian

答えは働いていますが、チェックリストライブラリを使用したのは 'mc.meals'が自分の入れ子になったng-repeatだからです。 2番目のmc.mealsのチェックボックスは何もしません。 @Paurian –

お返事ありがとうございます@AbelChun。 mc.mealsに入れ子になっているmを含むようにこの例を修正しました。私はチェックボックスのライブラリを避けているわけではありませんが、この特定の必要性のためには余計だと思います。 – Paurian

バインドあなたの配列、例えば以外の変数に入力：あなたのHTML内another_variable ：チェックリストモデルは= "another_variable"

そして、あなたのコードで：

if(mc.selectedCBId.length == 2){ 
    mc.selectedCBId = another_variable; 

} 

if(mc.selectedCBId.length == 2){ 
    $event.preventDefault(); 
    mc.selectedCBId = another_variable; 
} 
if(mc.selectedCBId.length > 2){ 
    alert("You can't select more than 2"); 
}

出典

2017-06-01 02:35:33

最初のチェックボックスをオンにすると、2番目のチェックボックスをクリックするとチェックされず、mc.selectedCBIdに配列の2つの項目があります。 –

私は自分の答えを編集してそれを返信してplsを返しました –

クリックしてチェックボックスのリストを停止

答えて

関連する問題