我正在使用引导程序下拉列表来过滤用于多选操作的长项列表。
代码会生成如下控件:
虽然我可以使用selectahead-on-select属性捕获捕获的项目,以运行捕获选定项目的功能,但是我无法使复选框本身在选中的项目上显示为已选中。
这是html
<div id="choose-classes">
<input placeholder="Select other Quickbooks classes"
typeahead-editable="false"
uib-typeahead="myitem.name for myitem in otherClasses | filter:$viewValue" class="form-controller"
typeahead-template-url="addClassTemplate.html"
typeahead-on-select="onSelect($item, $model, $label, $event)"
ng-model="dummy"/>
</div>
<script type="text/ng-template" id="addClassTemplate.html">
<span class="add-class-check">
<input type="checkbox" ng-checked="isChecked(match-label)" >
<span ng-bind-html="match.label | uibTypeaheadHighlight:query</span>
</script>
似乎失败的原因是由于某些原因,输入元素模板上ng-checked附带的代码从未真正触发过。我在其中放置了调试器,该函数似乎没有被调用。假设可能是因为它在模板中,可能无法访问控制器,但是即使我知道选中了哪些项目,也无法弄清楚如何正确填充此复选框。
$scope.otherSelectedClasses={};
$scope.otherSelectedClasses.classNames = {};
$scope.isChecked = function(otherName) {
debugger;
let val= $scope.otherSelectedClasses.classNames[otherName];
return val;
};
$scope.myvalue = true;
$scope.onSelect = function (a, b, c, d) {
toggle(a.name);
$scope.dummy="";
};
function toggle(name) {
let list = $scope.otherSelectedClasses.classNames;
if (name in list) {
list[name] = !list[name];
} else {
list[name] = true;
}
}