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

时间:2016-03-30 18:19:06

标签: javascript html angularjs

我需要制作一个angularjs代码,其中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'
}];

2 个答案:

答案 0 :(得分:0)

请看一下这篇文章,它有很好的解释:

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

jsfiddle中有一个例子,说明你要完成的任务。

答案 1 :(得分:0)

如果我理解正确,它应该像下面的演示或fiddle中那样工作。

(在演示中,我将选择的计数减少到5,10和20,以便于测试。)

在每次更改选择时,它会通过循环遍历项目并将public class Client() implements Runnable{ private Manager managerRef; public Client(Manager m){ managerRef = m; } public void run() { while(true){ String predicate = //Get the predicate somehow Set<String> workToDo = managerRef.retrieve(predicate) if(workToDo.isEmpty()){ synchornized(managerRef){ managerRef.wait(); } } else { //Do something } } } } 属性更改为true来更新选择。如果您在另一次更改时选择较少的项目,则只需要存储先前的计数即可删除该标记。

&#13;
&#13;
checked
&#13;
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
  }
}
&#13;
ul {
  list-style-type: none;
}

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