发表于: 2017-05-23 23:04:49

1 1159


今天完成的事情:

完善任务10新增与编辑的逻辑编写,解决了编辑也进去后无法渲染出图片与下拉选项。


明天的计划:

完成说明富文本编辑器的引入使用,修复下拉列表刷新的bug,准备demo。


遇到的问题:

1 下拉选项无法正确渲染。

原写法:

<select class="form-control" ng-model="selType">
   <option value="">全部</option>
   <option value="0">首页Banner</option>
   <option value="1">找职位Banner</option>
   <option value="2">找精英Banner</option>
   <option value="3">行业大图</option>
</select>

使用select与options编写,vaule值来表示下拉选项,通过ng-model来获取value值,这样就把点击的值传给后台。

但是当后台获取了值传给了ng-model,ng-model无法将这个值传给value,导致下拉选项无法正确的渲染。

正确的写法:

使用ng-options来编写下拉选项:

html:

<select class="form-control" ng-if="selectType == 3" ng-model="industryType" ng-options="x.value as x.name for x in industryOptions"  required></select>

js部分:

$scope.selectType = '请选择';
$scope.typeOptions = [
{value:'',name:'请选择'},
   {value:0,name:'首页Banner'},
   {value:1,name:'找职位Banner'},
   {value:2,name:'找精英Banner'},
   {value:3,name:'行业大图'}
];

可以正反赋值,都能渲染。


收获:

ng-options的用法,功能很强大,注意关于数组和对象有不同的写法:

ng-options有以下格式的语法

for array data sources:

    • label for value in array
    • select as label for value in array
    • label group by group for value in array
    • select as label group by group for value in array track by trackexpr

for object data sources:

    • label for (key , value) in object
    • select as label for (key , value) in object
    • label group by group for (key, value) in object
    • select as label group by group for (key, value) in ob



返回列表 返回列表
评论

    分享到