anglejを使用してドロップダウンから選択されたオプションに基づいて適切なチェックボックスを選択

Question

私はanglejsコードを作成して、selectの変更によって適切なcheckeboxがマークされるようにする必要があります。私は約200のレコードをページに持っています。たとえば、ドロップダウンに50,100、および200の数字がある場合。オプションの選択に基づいて、レコードの数をチェックする必要があります。手段ドロップダウンから50を選択すると、50個のレコードを自動的にチェックする必要があります。誰でもこの機能を習得するのを助けてくれますか、事前に感謝してください。ここで

は私のHTMLです：

<div style="float:left;"> 
 
    <label class="col-sm-2 control-label">To:</label> 
 
    <div class="col-sm-4"> 
 
     <select class="form-control" ng-model="option.type" ng-change="" id="selection" /> 
 
     <option value="">Select an Option</option> 
 
     <option ng-repeat="option in typeOptionsselect" value="{option.value}}">{{option.name}}</option> 
 
     </select> 
 
    </div> 
 
</div> 
 

 
<tr ng-repeat="person in lead | orderBy:predicate:reverse | filter:searchText " class="tHi" > 
 
<td style="text-align:center"><input type="checkbox" ng-checked="master" name="ids[]" id="ids" value="{{person.fId}}"/></td> 
 
<td ng-click="editItem(person.fId)">{{person.companyname}}</td> 
 
<td ng-click="editItem(person.fId)">{{person.firstname}}</td> 
 
<td ng-click="editItem(person.fId)">{{person.lastname}}</td> 
 
<td ng-click="editItem(person.fId)">{{person.address1}}</td> 
 
<td ng-click="editItem(person.fId)">{{person.city}}</td> 
 
<td ng-click="editItem(person.fId)">{{person.reprsent}}</td> 
 
<td ng-click="editItem(person.fId)">{{person.cemail}}</td> 
 
</tr>

$scope.typeOptionsselect = [ { 
 
    name: '50', 
 
    value: '50' 
 
}, { 
 
    name: '100', 
 
    value: '100' 
 
}, { 
 
    name: '200', 
 
    value: '200' 
 
}];

Answer 1

、それはそれは非常によく説明しています。この記事を見てください：

How do I bind to list of checkbox values with AngularJS?

あなたが達成しようとしていることのjsfiddleに例があります。

Answer 2

正しく理解すると、次のデモまたはfiddleのように動作するはずです。

（デモでは、私は5に選択の数を削減しました、簡単にテストのための10 & 20。）

選択の各変更には、それはアイテムや変更をループして、選択を更新checkedプロパティをtrueに設定します。前回のカウントの格納は、別の変更で少ないアイテムを選択した場合にのみフラグを削除するために必要です。ウル答えを

angular.module('demoApp', []) 
 
\t .controller('mainController', MainController) 
 
    .constant('APP_CONSTS', { 
 
    \t list_items: 200, 
 
    maxValue: 50 
 
    }); 
 
    
 
function MainController(APP_CONSTS) { 
 
\t var vm = this, 
 
    \t \t i, lastCheckCount; 
 
     
 
    vm.items = []; 
 
    vm.checkCounts = [5, 10, 20]; 
 
    vm.checkedItemsCount = 0; 
 
    
 
    vm.selectItems = selectItems; 
 
    
 
    activate(); 
 
    
 
    function activate() { 
 
    for (i=0; i< APP_CONSTS.list_items; i++) { 
 
     vm.items.push({ 
 
     id: i, 
 
     value: parseInt(Math.random()*APP_CONSTS.maxValue), 
 
     checked: false 
 
     }); 
 
    } 
 
    } 
 
    
 
    function selectItems() { 
 
    \t var counter; 
 
    vm.checkedItemsCount = vm.checkedItemsCount || 0; // default to 0 if undef. 
 
    
 
    if (vm.checkedItemsCount < lastCheckCount) { 
 
    \t // we need to remove the check because there are fewer selections 
 
     for (counter=vm.checkedItemsCount; counter < lastCheckCount; counter++) { 
 
    \t \t vm.items[counter].checked = false; 
 
    \t } 
 
    } 
 
    
 
    // add check to all items upt to checkItemsCount 
 
    for (counter=0; counter < vm.checkedItemsCount; counter++) { 
 
    \t vm.items[counter].checked = true; 
 
    } 
 
    
 
    lastCheckCount = vm.checkedItemsCount; // save count so we can check if we need special handling at next run 
 
    } 
 
}

ul { 
 
    list-style-type: none; 
 
} 
 

 
.selection { 
 
    position: absolute; 
 
    background-color: beige; 
 
    left: 150px; 
 
    width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController as mainCtrl"> 
 
    <!--<pre>{{mainCtrl.items | json : 2}}</pre>--> 
 
    <pre class="selection"> 
 
    selected items: 
 
    {{ mainCtrl.items | filter: {'checked':true} | json: 2}} 
 
    </pre> 
 
    <select ng-options="count for count in mainCtrl.checkCounts" ng-model="mainCtrl.checkedItemsCount" ng-change="mainCtrl.selectItems()"> 
 
    <option style="display:block" value=""></option> 
 
    </select> 
 
    <ul> 
 
    <li ng-repeat="item in mainCtrl.items"> 
 
    {{item.id}} <input type="checkbox" ng-model="item.checked"/>{{item.value}} 
 
    </li> 
 
    </ul> 
 
</div>