根据使用angularjs从下拉菜单中选择的选项选择适当的复选框

Selecting appropriate checkbox based upon Option selected from drop down using angularjs

本文关键字：选择 选项 复选框 下拉菜单 angularjs      更新时间：2023-10-16

我需要制作一个angularjs代码，其中在更改select时会标记相应的复选框。我一页大约有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'
}];

如果我理解正确，它应该像下面的演示或小提琴一样工作。

（在演示中，我将select的计数减少到5、10和20，以便于测试。）

每次更改选择时，它都会通过循环项目来更新选择，并将checked属性更改为true。只有当您在另一次更改中选择较少的项目时，才需要存储以前的计数来删除标志。

angular.module('demoApp', [])
	.controller('mainController', MainController)
  .constant('APP_CONSTS', {
  	list_items: 200,
    maxValue: 50
  });
  
function MainController(APP_CONSTS) {
	var vm = this,
  		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() {
  	var counter;
    vm.checkedItemsCount = vm.checkedItemsCount || 0; // default to 0 if undef.
    
    if ( vm.checkedItemsCount < lastCheckCount ) {
    	// we need to remove the check because there are fewer selections
      for ( counter=vm.checkedItemsCount; counter < lastCheckCount; counter++) {
    		vm.items[counter].checked = false;
    	}
    }
    
    // add check to all items upt to checkItemsCount
    for ( counter=0; counter < vm.checkedItemsCount; counter++) {
    	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>

相关文章：