1.固定数据式下拉框：
对应的JS实现当下拉框切换选项时进行页面跳转
var vm = this;vm.redirect = function (val) { switch (val) { case 'modify': $state.go('maintain-names', { param1: null }); break; case 'add': $state.go('maintainNamesAdd', { param1: null }); break; default: $state.go('maintain-names', { param1: null }); }}; 2.绑定数据的下拉框：
相应的JS：
var promiseCategory = webapi.post('BLNamesService', 'PopulateCategory'); promiseCategory.then(function (resp) { vm.selectedCategories = resp.data;}); 相应的后台返回值：
public DataTable PopulateCategory(string strVarID, string name) { BLNamingPool blobj = new BLNamingPool(); dsPopulate = blobj.PopulateVarietyFields(Convert.ToInt32(strVarID), name); return dsPopulate.Tables[2]; } 3.日历：
相应JS：
vm.dateOptions = { formatYear: 'yy', dateFormat: 'dd-MMM-yyyy', maxDate: new Date(2100, 5, 22), //minDate: new Date(), startingDay: 1};vm.popupvalidFrom = { opened: false };vm.openValidFromPermission = function (){ vm.popupvalidFrom.opened = true;} 4.UI-Grid:
a b c d { {searchData.status}} { {searchData.vch_name}} { {searchData.categories}} { {searchData.vch_name_description}}
相应JS：
vm.PAGE_SIZE_ARRAY = [10, 25, 50, 75, 100];vm.gridOptionsOfSearchResult = { paginationPageSizes: vm.PAGE_SIZE_ARRAY, paginationPageSize: vm.pageNumber, columnDefs: [ { displayName: 'a', field: 'status', cellTemplate: ' ', cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) { var s = row.entity.status if (s == 'Submitted') { return 'abbr01'; } if (s.indexOf('Rejected') >= 0) { return 'abbr02'; } if (s == 'Reserved') { return 'abbr03'; } } }, { displayName: 'b', field: 'name', cellTemplate: '', cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) { var s = row.entity.status if (s == 'Submitted') { return 'abbr01'; } if (s.indexOf('Rejected') >= 0) { return 'abbr02'; } if (s == 'Reserved') { return 'abbr03'; } } }, { displayName: 'c', field: 'categories', cellTemplate: ' ', cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) { //if (grid.getCellValue(row, col) === 'Velity') { // return 'abbr01'; //} var s = row.entity.status if (s == 'Submitted') { return 'abbr01'; } if (s.indexOf('Rejected') >= 0) { return 'abbr02'; } if (s == 'Reserved') { return 'abbr03'; } } }, { displayName: 'd', field: 'vch_name_description', cellTemplate: ' ', cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) { //if (grid.getCellValue(row, col) === 'Velity') { // return 'abbr01'; //} var s = row.entity.status if (s == 'Submitted') { return 'abbr01'; } if (s.indexOf('Rejected') >= 0) { return 'abbr02'; } if (s == 'Reserved') { return 'abbr03'; } } }, ], }; 颜色样式：
5.简单的捆绑数据表格：
用于只显示数据的简单表格
| A | B | C |
|---|---|---|
| { {r.a}} | { {r.b}} | { {r.c}} |
6.给一个表格动态添加1行空白行：
A B C
button：点击实现添加行
相应动态JS：
vm.addRowsButton = function () {var rejection = { a:'' , b_description: '', remarks: '', } vm.getRejection.push(rejection); //push方法的使用 }; 7.转换时间格式的方法：
function changeDateFormat(oldDate) { var dateOfRenewal; if (Object.prototype.toString.call(oldDate) === "[object Date]") { if (isNaN(oldDate.getTime())) { dateOfRenewal = null; return dateOfRenewal; } } if (oldDate == null || oldDate == "") { dateOfRenewal = null; } else { var date = new Date(oldDate); var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); dateOfRenewal = (date.getMonth() + 1) + "/" + day + "/" + date.getFullYear(); } return dateOfRenewal } 在转换时间时可以使用replace转换格式：
Exp: vm.oldDate = new Date(vm.oldDate .replace(/-/g, ","));