Выбор соответствующего флажка на основе опции, выбранной из раскрывающегося списка с помощью angularjs

Question

Мне нужно сделать код угловойады, где при смене выбора вызывают соответствующие отметки. У меня около 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>