AngularJs 学习笔记(2)

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="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-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, ","));