【Angular】下拉列表写活的,动态查询的下拉列表;

因业务需要,下拉列表需要动态查询;但是一直显示不出来;
究其原因,乃未初始化也;

一、错误写法:

html页面:

<div class="col-lg-2">
      <select class="input-sm form-control" name="major" id="major"  ng-options="option.id as option.name for option in majorList"  ng-model="q.major">
      </select>
</div>

1.第一种错误是跟业务冲突:
把majorList写死;

   $scope.majorList = [
        { id: 1, name: '主值' },
        { id: 2, name: '副值' }
    ];

2.不写死,但是没有具体地初始化;(注意体会这个具体二字)
所有后来调用了一个方法,从数据库查询过来的:

        questionService.getMajorType({LovId:4}).then(
            function (res) {
                $scope.majorList = [];
                for (var i = 0; i < res.data.length; i++) {
                    console.log("i:"+i);
                    /*初始化:*/
                    var a = {
                        id: i,
                        name: res.data[i].name
                    };
                    $scope.majorList.push(a);
                }
                console.log($scope.majorList);
            }
        );

这里查也查出来了,但是就是显示不出来,而且,会影响到其它的下拉列表,导致其它的下拉列表也显示不出来,百思不得其解,如下图:
这里写图片描述
后来发现,这其实是因为没有初始化,没有初始化的更具体:

二、解决办法:

如果,我们初始化【专业列表】的时候没有具体,就会出现刚才的那一种错;所以,如果我们有4个专业,初始化的时候,至少要给出一个例子,然后再用动态查询,组装一个同结构的数组,数组里是同结构实体类;下面的这种才是可以的:
这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要实现vue的input框下拉关键词搜索,可以借助于Element UI框架中的Autocomplete组件。 首先,在组件中引入Autocomplete组件: ``` <template> <el-autocomplete v-model="selectedKeyword" :fetch-suggestions="querySearch" placeholder="请输入关键词"> <i class="el-icon-search" slot="prefix"></i> <el-button slot="append" icon="el-icon-circle-check"></el-button> </el-autocomplete> </template> <script> export default { data() { return { selectedKeyword: '', keywords: ['vue', 'React', 'Angular', 'Webpack', 'Babel', 'Node.js', 'TypeScript', 'JavaScript'] } }, methods: { querySearch(queryString, cb) { const keywords = this.keywords; const results = queryString ? keywords.filter(keyword => keyword.toLowerCase().indexOf(queryString.toLowerCase()) !== -1) : keywords; // 调用回调函数,将结果返回给Autocomplete组件 cb(results); } } } </script> ``` 在上述代码中,我们使用了Element UI的Autocomplete组件来实现下拉关键词搜索框,使用了Autocomplete组件的fetch-suggestions属性来开启下拉搜索功能。在querySearch方法中,我们根据用户输入的关键词来过滤关键词列表,并将过滤后的结果返回给Autocomplete组件。 需要注意的是,在Autocomplete组件中,我们可以使用slot来添加前缀和后缀,这里我们添加了一个搜索图标和一个确认按钮。 这样,当用户在输入框中输入关键词时,会触发querySearch方法来搜索关键词,并将搜索结果以下拉列表的形式呈现在输入框下方供用户选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陶洲川

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值