无法设置AngularJs模板中选中的复选框

时间:2019-04-26 01:33:23

标签: javascript angularjs

我正在使用引导程序下拉列表来过滤用于多选操作的长项列表。

代码会生成如下控件:

typeahead with checklist

虽然我可以使用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;
                }
            }

0 个答案:

没有答案