javascript - 从 ui-select 框中进行选择后,所选择的选项不会像所选择的那样粘贴(不可见)

标签 javascript angularjs angularjs-directive angular-ui

我为此创建了一个 plunker:http://plnkr.co/edit/5nk4BnYoO52En7P6kPu9

有选择选项,但当你选择一个时,ui-select 留空。可能重要的注意事项:我在指令(ui-bootstrap)中使用它。作为对此的旁注 - 在 plunker 中没有包装指令,所以这不是罪魁祸首。

<ui-select search-enabled="true" ng-change="updateMedu()" style="width: 100%" ng-model="medications.chosenMedications.metadata.conceptGroup.conceptProperties">
    <ui-select-match placeholder="Please click to choose or start typing dosage value..">{{$item}}</ui-select-match>
    <ui-select-choices repeat="cp in medications.chosenMedications.metadata[key].conceptGroup[1].conceptProperties | filter: $select.search">
        {{cp.synonym}}
    </ui-select-choices>
</ui-select>

数据集的手动模拟:

$scope.medications.chosenMedications.metadata = [
    {
        conceptGroup: [
            {
                conceptProperties: [
                   {synonym: "Item One"},
                   {synonym: "Item Two"},
                   {synonym: "Item Three"}
                ]
            },
            {
                conceptProperties: [
                    {synonym: "Item A"},
                    {synonym: "Item B"},
                    {synonym: "Item C"}
                ]
            }
         ]
     }
];

最佳答案

只需尝试以下代码:

<ui-select theme="select2" search-enabled="true" style="width: 100%" 
        ng-model="medications.chosenMedications.metadata.conceptGroup.conceptProperties">
    <ui-select-match placeholder="Click to select or start typing...">
        {{$select.selected.synonym}}
    </ui-select-match>
    <ui-select-choices repeat="cp in medications.chosenMedications.metadata[0].conceptGroup[1].conceptProperties | filter: $select.search">
            {{cp.synonym}}
    </ui-select-choices>
</ui-select>

您的问题是您尝试显示 {{$item}} 而不是 {{$select.selected.synonym}}

希望这能解决您的问题。

工作演示:http://plnkr.co/edit/B3HTozs0MniWBpEj8L50?p=preview

关于javascript - 从 ui-select 框中进行选择后,所选择的选项不会像所选择的那样粘贴(不可见),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26386814/

相关文章:

javascript - 一个 Angular Ui 路由器状态下的多个 URL

javascript - 如何比较两个十六进制值?

angularjs - 有什么方法可以将 minlength/maxlength 的值插入到 ng-messages 的消息中吗?

javascript - 为什么我的 WebRTC 连接只能在本地网络上工作?

angularjs - Web API 通过 URL 加载,但从 Angular 脚本中获取错误 404

AngularJS:为什么以及何时需要调用 $timeout?

javascript - Angucomplete Alt url 远程

javascript - 如何从其他 Controller 调用$http.post?

javascript - 在父窗口上弹出 div

javascript - 如何格式化类似于 Stack Overflow 信誉格式的数字