花了一个月,差不多把公司的质量管理模块写好了,有过一些坑,所以要总结一下。
第一:由于angular自带的路由不能实现深层嵌套,所以采用的是angular-ui-route来控制路由,实现导航列表。

第二:根据输入的内容从显示相符的候选列表
我是使用angularstrap中的typeahead插件来实现的,如果angularstrap版本高于2.2必须使用bs-option属性来实现候选框,而不能用ng-option

第三:实现多级二级菜单
同样使用了angularstrap中的collapse插件,用了两次ng-repeat生成一二级菜单,难度最大的在于如何控制他们各自的样式,在这里用了很多的逻辑

<div class="panel-group" ng-model="panels.activePanel" role="tablist" aria-multiselectable="true" bs-collapse> <div class="panel panel-default" ng-repeat="item in vmManager.panelDataSource"> <div class="panel-heading" role="tab" ng-click="vmManager.selectMaterialIdItem(item.materialIdItem)"> <a bs-collapse-toggle style="cursor:pointer;color:#000" title="{{item.productId}}"> {{item.productName}} </a> </div> <div class="panel-collapse list-group " role="tabpanel" bs-collapse-target cg-busy="{promise:searchPromise}"> <a class="panel-body list-group-item" ng-repeat="inspectionItem in item.inspectionItemDatas" ng-class="{'active':inspectionItem===vmManager.currentinspectionItem}" ng-click="vmManager.selectinspectionItem(inspectionItem)"> {{inspectionItem.inspectionItem}} <span class="pull-right"> <i class="fa fa-check badge-success" title="结果判定标志" ng-show="inspectionItem.inspectionItemResult==='OK' && inspectionItem.InsptecitonItemIsFinished===true"></i> <i class="fa fa-close badge-fail" title="结果判定标志" ng-show="inspectionItem.inspectionItemResult==='NG' && inspectionItem.InsptecitonItemIsFinished==true"></i> </span> <span class="pull-right" title="数量显示标志" ng-class="{true: 'badge-info',false: 'badge-fail'}[inspectionItem.NeedFinishDatanumber===inspectionItem.HaveFinishDatanumber]"> {{inspectionItem.NeedFinishDatanumber}}/{{inspectionItem.HaveFinishDatanumber}} </span> </a> </div> </div> </div> </div>

第四:使用到了css3的多种颜色渐变和透明属性,画出三角形

第五:实现分页效果
用指令封装的分页器,实现自动分页效果,这样只要一句话就能调用分页,实现代码复用

<div ng-if="vmManager.dataSource.length>0" yl-pagination data-       dataset="vmManager.dataSets" data-datasource="vmManager.dataSource">
</div>

有错误欢迎指正,共同学习进步

光圣科技IQC质量管理模块的更多相关文章

  1. 2015年科技巨头的十个开源产品,不只是.NET、Swift

    2015年科技巨头的十个开源产品,不只是.NET、Swift发表于2015-12-0710:37|8245次阅读|来源InfoWorld|34条评论|作者JonGold,NetworkWorld产品.NETGitHubHadoop开源摘要:科技巨头将内部产品发布到开源社区,这可是相当时髦的举动。结果很可能是主要科技公司更加频繁地向开源社区发布最新的免费代码。下面是10个最值得注意的产品。Swift甚至连苹果这样众所周知对其知识产权缄口不言的公司也逐渐融入了这种精神,在今年的WWDC上发布了开源编程语言Sw

  2. Swift开发黑科技:还在争论MVC和MVVM?现在你应该试试MVP!

    我下定决心重构自己的代码,下面步入正题,结合Swift开发大会的一些分享,让我们谈谈架构。现在数据工程里面的目录是这样的:模型代码:为了简单我都使用了String类型的数据,至于为什么要使用struct而不使用class,大家可以参考WWDC2015的414号视频,讲的非常清楚,我自己的项目中的数据模型已经全部转成struct了,我会在后面专门写博文讲解struct,这里就不赘述了。

  3. android – 混合移动应用程序通常被科技行业的开发人员认为不如Native应用程序吗?

    对于大学项目,我的小组计划为Android制作云消息应用程序.最初,我们通过研究和使用IonicFramework和Phonegap来开始开发,以创建混合应用程序.根据我们迄今为止所阅读和学到的内容,我们所理解的是,混合应用程序开发允许我们使用Web技术(HTML,CSSJavascript)进行编码,我们非常熟悉它,而不是构建Native应用程序.它还具有在多个平台上运行的优点,只需很小的调整.

  4. Angularjs使用ng-repeat中$even和$odd属性的注意事项

    无可否认angularjs的崛起成为前端很大的福利,最近接到项目,框架便选中了angularjs。angularjs最吸引人的地方就是数据的双向绑定和指令了,这篇文章主要介绍了Angularjs中使用ng-repeat的$even和$odd属性的注意事项,需要的朋友可以参考下

  5. Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法

    指令是angular的核心功能之一,用好了事半功倍,监听ng-repeat执行状态仅仅是它功能的冰山一角吧。下面这篇文章主要介绍了Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法,需要的朋友可以参考下。

  6. 基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码

    这篇文章主要给大家介绍基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动的实例代码,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧

  7. 关于AngularJS中ng-repeat不更新视图的解决方法

    今天小编就为大家分享一篇关于AngularJS中ng-repeat不更新视图的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  8. angularjs在ng-repeat中使用ng-model遇到的问题

    本文给大家分享了一个个人在使用angular过程中遇到的在ng-repeat中使用ng-model的问题,并附上简单的解决办法,希望能对大家学习angular有所帮助

  9. AngularJS的ng-repeat指令与scope继承关系实例详解

    这篇文章主要介绍了AngularJS的ng-repeat指令与scope继承关系,结合实例形式通过ng-repeat指令详细分析了scope继承关系,需要的朋友可以参考下

  10. ng-repeat指令在迭代对象时的去重方法

    今天小编就为大家分享一篇ng-repeat指令在迭代对象时的去重方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部