使用angular和selectboxit设置选择下拉列表的值

时间:2016-03-15 03:07:57

标签: angularjs angularjs-directive selectboxit

我正在使用jquery插件“selectboxit”作为我的下拉列表。下面是带有angular指令“image-select-box”的html代码,它将选择下拉列表初始化为selectboxit。

<select ng-model="line" class="form-control" id="line" value="line"  image-select-box >
   <option value="0" data-iconurl="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAPCAYAAAAvQwurAAAAWUlEQVRYR+3WwQkAIRAEQc0/aAVfghmUfRn0lAs3Rx+9wKTrihsB448g4IDxBfC8LjhgfAE8777ghbf+lndsA3bZH2A39eOyfrJw/IADxhfA87rggPEF8LwNEroCEIoaIokAAAAASUVORK5CYII="></option>
   <option value="1" ng-selected='{{line == "1"}}' data-iconurl="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAPCAYAAAAvQwurAAAAc0lEQVRYR+2VSQ4AIAwC2/8/Wq9q4g0NIeMDsDBdunjRCXS0O8wVgMObAMAADk8g3B4TDODwBMLtrRM8xF7P7YD+HvCXfAB87+ovAJbvnwwAN1i8ttzkAOxGRFwPgMWBuskB2I2IuB4AiwN1kwOwGxFxPRP1UgoQsxww9AAAAABJRU5ErkJggg=="></option>
   <option value="2" data-iconurl="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAPCAYAAAAvQwurAAAAcElEQVRYR+2WQQ4AEBAD+f+jSZyExG1bacYDVGeW6I0VTaBHt6NcQ3D4ECAYweEEwutxgxEcTiC83n6Dx+ddz9eG876FLV4Irptq90BeguuqsrONAJ8sG3pNMII1nG0pCLah1wQjWMPZloJgG3pN8AQkBgYQvlQpRwAAAABJRU5ErkJggg=="></option>
   <option value="3" data-iconurl="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAPCAYAAAAvQwurAAAAZklEQVRYR+2XuxUAIAjEYP+htdDCzwSEWFqZi4fPDBc6gUTTCRcKhl8CBSsYngAczwYrGJ4AHO9s8Nisb6vdX8GUzEHB8f0kSoo8BtF1ft/gRiMajtoTzwbDvStYwfAE4Hg2GC54AkdIKBCb7coGAAAAAElFTkSuQmCC"></option>

指令中链接功能的内容如下

var $targetSelects = $(element),
      selectConfig = {
      autoWidth: false
};
$targetSelects.selectBoxIt(selectConfig);
$targetSelects.selectBoxIt('refresh');

我遇到的问题是没有使用ng-select更新所选值。

如果我在任何选项中硬编码selected =“selected”,它会正确显示所选值。但是,如果我使用ng-selected来设置所选属性,我注意到在链接功能期间,所有ng-selected属性计算为false,这就是selectboxit的原因,不显示实际选择的选项。但是,在页面加载后,我看到ng-selected已将所选属性添加到正确的选项元素。

这实质上意味着在编译和链接ng-selected属性之前,将编译和链接自定义属性。

我已将自定义属性的优先级设置为1000但仍无法使其正常工作。

任何帮助将不胜感激。

0 个答案:

没有答案