1.固定数据式下拉框：
<select id="add" class="form-control input-sm height25" ng-model="option" ng-init="option='modify'" ng-change="modify.redirect(option)"> <option value="modify">Modify Name</option> <option value="add">Add Name</option> </select>
对应的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.绑定数据的下拉框：
<select size="4" class="form-control"> <option ng-repeat="p in namesAdd.selectedCategories" value="{{p.int_category_id}}" label="{{p.vch_category_description}}"></option> </select>
相应的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.日历：
<div> <input type="text" style="background-color:white" uib-datepicker-popup="dd-MMM-yyyy" ng-model="nameModify.validFrom" is-open="nameModify.popupvalidFrom.opened" datepicker-options="nameModify.dateOptions" readonly="readonly" close-text="Close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default btn25" ng-click="nameModify.openValidFromPermission()"><i class="glyphicon glyphicon-calendar"></i></button> </span> </div>
相应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:
<div class="row" ng-show="nameModify.isSearchShow"> <div> <table> <tbody> <tr class="active"> <th>a</th> <th>b</th> <th>c</th> <th>d</th> </tr> <tr ng-repeat="searchData in nameModify.getData"> <td>{{searchData.status}}</td> <td><a ng-click="nameModify.indexSearch(searchData.int_name_id,searchData.vch_name)">{{searchData.vch_name}}</a> </td> <td>{{searchData.categories}}</td> <td>{{searchData.vch_name_description}}</td> </tr> </tbody> </table> </div> </div> <div class="row" ng-show="nameModify.resultFlage"> <div> <div style="width:1200px" ui-grid="nameModify.gridOptionsOfSearchResult" ui-grid-pagination="" class="grid"> </div> </div> </div>
相应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: '<div ng-bind="MODEL_COL_FIELD"></div>', 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: '<a class="searchResult_lable_style" href="javascript:void(0)" ng-click="grid.appScope.indexSearch(row.entity.int_name_id,row.entity.vch_name)" ng-bind="MODEL_COL_FIELD"></a>', 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: '<div ng-bind="MODEL_COL_FIELD"></div>', 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: '<div ng-bind="MODEL_COL_FIELD"></div>', 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'; } } }, ], };
颜色样式：
<style type="text/css"> .abbr01 { background-color: #99ccff !important; } .abbr02 { background-color: #FFB29C !important; } .abbr03 { background-color: #FFFFD9 !important; }
5.简单的捆绑数据表格：
用于只显示数据的简单表格
<table style="min-width:900px;"> <tbody> <tr class="active"> <th>A</th> <th>B</th> <th>C</th> </tr> <tr ng-repeat="r in nameModify.getUsedData"> <td>{{r.a}}</td> <td>{{r.b}}</td> <td>{{r.c}}</td> </tr> </tbody> </table>
6.给一个表格动态添加1行空白行：
<div> <table> <tr class="active"> <th>A</th> <th>B</th> <th>C</th> </tr> <tr ng-repeat="x in nameModify.getRejection"> <td> <select ng-model="x.a" ng-options="s.value as s.text for s in nameModify.aList"></select> </td> <td> <label class="text_normal">{{x.b_description}}</label> </td> <td> <textarea class="form-control height25" ng-model="x.remarks"></textarea> </td> </tr> </table> </div>
button：点击实现添加行
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <button id="btnaddrow" class="btn btn-info smallBtn height25" ng-click="nameModify.addRowsButton()">Add Rows</button> </div>
相应动态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, ","));