angularjs中下拉框select option默认值

http://www.111cn.net/wy/js-ajax/101967.htm


今天又被一个angularjs的一个问题给难住了,有花了比较多的时间去解决

option ng-repeat多空白项


<select class="form-control" ng-model="posts.website">
<option value="0">请选择网站</option>
<option ng-repeat="row in list.websites" value="{{row.websites_id}}" >{{row.websites_name}}</option>
</select>
请看上面的代码,ng-repeat在循环的时候发现了一个空白的选项,chrome解析出来代码是

chrome解析错误代码


<option value="? undefined:undefined ?"></option>

然后查了list.websites对象的值貌似没有问题

然后google一下,这里又要吐槽一下百度查不到结果
发现要初始化posts.website的值,于是用ng-init初始一下值,把代码修改成

<select class="form-control" ng-model="posts.website" ng-init="posts.website='0'">
<option value="0">请选择网站</option>
<option ng-repeat="row in list.websites" value="{{row.websites_id}}" >{{row.websites_name}}</option>
</select>

正常了,好坑啊

这文章里讲了怎么解决添加页面的option多出来的问题

在修改页面里我也是安装这个方法去处理,但是不行,给ng-model附上值就是显示不了默认值,最后在自己的摸索下解决了这个问题

正确方面

<select ng-model="posts.website" ng-options="c.websites_id as c.websites_name for c in posts.websites" class="form-control" ng-selected="c.websites_id==posts.website">
<option value="">请选择网站</option>
</select>

游览器解析的代码为

<select ng-model="posts.website" ng-options="c.websites_id as c.websites_name   for c in posts.websites" class="form-control ng-pristine ng-valid ng-touched" ng-selected="c.websites_id==posts.website">
<option value="" class="" selected="selected">请选择网站</option>
<option label="fdsaffd" value="number:4">fdsaffd</option>
<option label="fdsaffdsa" value="number:3">fdsaffdsa</option>
<option label="fdsaf" value="number:2">fdsaf</option>
<option label="小松博客" value="number:1" selected="selected">小松博客</option>
</select>


为了在 `tab2` 中的下选项中设置默认值为 "符合",你需要在初始化数据时为 `anotherData` 的每一项添加一个 `complianceStatus` 属性,并将其初始值设为 "符合"。具体步骤如下: 1. **修改 `fetchTab2Data` 方法**:在获取数据后,为每一项添加 `complianceStatus` 属性并设置其初始值为 "符合"。 2. **更新模板中的绑定**:确保模板中的 `v-model` 绑定正确地反映了这一变化。 以下是具体的代码修改: ### 修改 `fetchTab2Data` 方法 在 `methods` 对象中找到 `fetchTab2Data` 方法,并进行以下修改: ```javascript methods: { // 其他方法... fetchTab2Data() { request({ url: '/api/check_carryout_record/getPageData', method: 'POST', header: { 'content-type': 'application/json', 'Authorization': `Bearer ${getToken()}` }, dataType: 'json' }).then(response => { this.anotherData.originalRows = response.rows.map(item => ({ ...item, complianceStatus: '符合' // 添加默认值 })); this.filterTab2Data(this.anotherData); }).catch(error => { console.error(error); uni.showToast({ title: '请求失败', icon: 'none' }); }); }, // 其他方法... } ``` ### 更新模板中的绑定 确保模板中的 `v-model` 绑定正确地反映了这一变化。这部分已经在你的代码中存在,但为了完整性,这里再次列出相关部分: ```html <view v-if="currentTab === 'tab2'" class="tab-page"> <view class="filter-bar"> <!-- ... (类似的过滤器按钮) ... --> </view> <view class="text-wrapper"> <view v-for="(item, index) in anotherData.rows" :key="index" class="text-item"> <span class="input-prefix">ID: </span> <span class="text-value">{{ item.Main_task_Nopri }}</span> <br /> <span class="input-prefix">检查区域: </span> <span class="text-value">{{ item.AREA_NAME }}</span> <br /> <span class="input-prefix">检查标准: </span> <span class="text-value">{{ item.check_sta }}</span> <br /> <select v-model="item.complianceStatus" @change="handleComplianceChange(item)"> <option value="符合">符合</option> <option value="不符合">不符合</option> </select> <br /> <button v-if="item.complianceStatus === '不符合'" @click="showDetail(item)">录入隐患</button> </view> </view> </view> ``` 通过以上修改,`tab2` 中的下选项将会默认选择 "符合"。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值