albert's blog: AngularJS

Showing posts with label AngularJS. Show all posts

2015/11/05

[AngularJS] How to format a number value in ng-grid cell to two decimal places?

Problem
We are using ng-grid to implement data grid as bellows:

Our customer asks the amount column should set to two decimal places (小數點第二位).
The column definitions in this ng-grid are as following:

 columnDefs : [ {
                field : 'belongFlag',
                displayName : '分類類別',
                width : '15%',
                cellClass : "text-left",
                cellFilter:'dbm034eBelongFilter:row.entity.mgeType'
            }, {
                field : "ageTypeName",
                displayName : '基金法人類別',
                width : '20%',
                cellClass : "text-left"
            }
            , {
                field : 'fundName',
                displayName : '基金法人名稱',
                width : '20%',
                cellClass : "text-left"
            }, {
                field : 'rate2Year',
                displayName : ($scope.model.year * 1 - 2) + '年度',
                width : '10%',
                cellClass : "text-right"
            }, {
                field : "rate1Year",
                displayName : ($scope.model.year * 1 - 1) + '年度',
                width : '10%',
                cellClass : "text-right"
            }, {
                field : "rate",
                displayName : ($scope.model.year * 1) + '年度',
                width : '10%',
                cellClass : "text-right"
            }, {
                field : "ageType",
                displayName : 'ageType',
                width : '0%',
                cellClass : "text-right",
                visable : false
            }
            ]

How-To
Set cellFiter to amount fields as bellows can fulfill this requirement:

 columnDefs : [ {
                field : 'belongFlag',
                displayName : '分類類別',
                width : '15%',
                cellClass : "text-left",
                cellFilter:'dbm034eBelongFilter:row.entity.mgeType'
            }, {
                field : "ageTypeName",
                displayName : '基金法人類別',
                width : '20%',
                cellClass : "text-left"
            }
            , {
                field : 'fundName',
                displayName : '基金法人名稱',
                width : '20%',
                cellClass : "text-left"
            }, {
                field : 'rate2Year',
                displayName : ($scope.model.year * 1 - 2) + '年度',
                width : '10%',
                cellClass : "text-right",
                cellFilter:'number:2'
            }, {
                field : "rate1Year",
                displayName : ($scope.model.year * 1 - 1) + '年度',
                width : '10%',
                cellClass : "text-right",
                cellFilter:'number:2'
            }, {
                field : "rate",
                displayName : ($scope.model.year * 1) + '年度',
                width : '10%',
                cellClass : "text-right",
                cellFilter:'number:2'
            }, {
                field : "ageType",
                displayName : 'ageType',
                width : '0%',
                cellClass : "text-right",
                visable : false
            }
            ]

Check the result

Reference
[1] http://stackoverflow.com/questions/30382666/how-to-format-a-number-value-in-angularjs-ui-grid-cell-to-two-decimal

2015/10/02

[AngularJS] ng-change and ng-hide application

Requirement
If 資料類別 choose 預算數，then 預算階段 should show all options:

If 資料類別 choose 還本數 or 付息數, then 預算階段 should show 預算數 and 決算數

Original HTML code snippet (does not bind any event yet):

 <!-- original HTML code snippet (does not bind any event yet) -->
 <div class="row">
   <div class="col-sm-12">
     <div class="col-sm-6 ">
       <label class="control-label label-width-4 text-right">資料類別</label> 
       <input type="radio" value="C" data-ng-model="dbm003eFormBean.dataType">預算數
       <input type="radio" value="P" data-ng-model="dbm003eFormBean.dataType">還本數
       <input type="radio" value="I" data-ng-model="dbm003eFormBean.dataType">付息數
     </div>
     <div class="col-sm-6 "></div>
   </div>
 </div>
 
 <div class="row">
   <div class="col-sm-12">
       <div class="col-sm-6 ">
           <label class="control-label label-width-4 text-right">預算階段</label> 
           <input type="radio" value="P0" data-ng-model="dbm003eFormBean.budgetStatus">{{budgetStatusP0Text}}
           <input type="radio" value="P1" data-ng-model="dbm003eFormBean.budgetStatus">{{budgetStatusP1Text}}
           <input type="radio" value="F0" data-ng-model="dbm003eFormBean.budgetStatus">{{budgetStatusF0Text}}
           <input type="radio" value="F1" data-ng-model="dbm003eFormBean.budgetStatus">{{budgetStatusF1Text}}
           <input type="radio" value="F2" data-ng-model="dbm003eFormBean.budgetStatus">{{budgetStatusF2Text}}
       </div>
       
       <div class="col-sm-6 ">
       </div>
   </div>
 </div>

How-To
Bind ng-change event with 資料類別 radio button

 <!-- Updated HTML code snippet
 * bind ng-change event with 資料類別 radio button
 -->
 <div class="row">
  <div class="col-sm-12">
    <div class="col-sm-6 ">
      <label class="control-label label-width-4 text-right">資料類別</label> 
      <input type="radio" value="C" data-ng-model="dbm003eFormBean.dataType" 
             data-ng-change="changeDataType('C')">預算數
      <input type="radio" value="P" data-ng-model="dbm003eFormBean.dataType" 
             data-ng-change="changeDataType('P')">還本數
      <input type="radio" value="I" data-ng-model="dbm003eFormBean.dataType" 
             data-ng-change="changeDataType('I')">付息數
    </div>

    <div class="col-sm-6 "></div>
  </div>
</div>

Bind ng-hide with 預算階段 radio button and control radio button text

<!-- * bind ng-hide with 預算階段  radio button -->
<div class="row">
  <div class="col-sm-12">
      <div class="col-sm-6 ">
          <label class="control-label label-width-4 text-right">預算階段</label> 
          <input type="radio" value="P0" data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusP0">{{budgetStatusP0Text}}
          <input type="radio" value="P1" data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusP1">{{budgetStatusP1Text}}
          <input type="radio" value="F0" data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusF0">{{budgetStatusF0Text}}
          <input type="radio" value="F1" data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusF1">{{budgetStatusF1Text}}
          <input type="radio" value="F2" data-ng-model="dbm003eFormBean.budgetStatus" 
                 data-ng-hide="hideBudgetStatusF2">{{budgetStatusF2Text}}
      </div>
      
      <div class="col-sm-6 ">
      </div>
  </div>
</div>

JavaScript code snippet

<!-- JavaScript code snippet -->
$scope.changeDataType = function(dataType){
    //if 資料類別(dataType) choose '還本數'(P) or 付息數(I)
    if(dataType =='P' || dataType == 'I'){
     //show '預算數' and '決算數' options
        $scope.hideBudgetStatusP0 = true;
        $scope.hideBudgetStatusP1 = false;
        $scope.hideBudgetStatusF0 = false;
        $scope.hideBudgetStatusF1 = true;
        $scope.hideBudgetStatusF2 = true;
        
  //show 預算數 and 決算數 's radio buttons' text
        $scope.budgetStatusP0Text = '';
        $scope.budgetStatusP1Text = '預算數';
        $scope.budgetStatusF0Text = '決算數';
        $scope.budgetStatusF1Text = '';
        $scope.budgetStatusF2Text = '';
        
  //set default option
        $scope.dbm003eFormBean.budgetStatus = 'P1';
    }
 //if 資料類別(dataType) choose '預算數'(C)
 else if(dataType == 'C'){
     //show 預算階段 all options
        $scope.hideBudgetStatusP0 = false;
        $scope.hideBudgetStatusP1 = false;
        $scope.hideBudgetStatusF0 = false;
        $scope.hideBudgetStatusF1 = false;
        $scope.hideBudgetStatusF2 = false;
        
  //show all radio buttons' text
        $scope.budgetStatusP0Text = '預算案數';
        $scope.budgetStatusP1Text = '預算數';
        $scope.budgetStatusF0Text = '決算數';
        $scope.budgetStatusF1Text = '院編決算數';
        $scope.budgetStatusF2Text = '審定決算數';
        
  //set default option
        $scope.dbm003eFormBean.budgetStatus = 'P0';
    }
};

2015/10/01

[AngularJS] ng-grid column filter

Requirement

The following grid is implemented by ng-grid.
The value of the second column, 預算階段, is P1/P1/F0/F1/F2.

According to the specification of this function, the value of the second column should be translated as bellows:

The ng-grid configuration :

    $scope.dbm003eGrid1 = {
            data : 'dbm003eGrid1Data',
            selectedItems: $scope.dbm003eGrid1SelectedRow,
            columnDefs : [
               { field : 'accountYr',    displayName : '預算年度',   width: 100,  cellClass: 'text-left', cellFilter : 'mingGuoYearFilter'},
               { field : 'budgetStatus', displayName : '預算階段',     width: 100, cellClass: 'text-left'},
               { field : 'budgetCode', displayName : 'budgetCode', width: 0,   cellClass: 'text-left', visible : false},
               { field : 'budgetName', displayName : '預算別',     width: 200, cellClass: 'text-left'},
               { field : 'debtCode',   displayName : 'debtCode',   width: 0,    cellClass: 'text-left', visible : false},
               { field : 'debtName',   displayName : '債務別',     width: 400,  cellClass: 'text-left'},
               { field : 'budgetYearPeriod',  displayName : '預算年度',   width: 100,  cellClass: 'text-left'},
               { field : 'beginYear',   displayName : 'beginYear',   width: 0,    cellClass: 'text-left', visible : false},
               { field : 'endYear',     displayName : 'endYear',   width: 0,    cellClass: 'text-left', visible : false},
               { field : 'ttlAmount',   displayName : '預算總額',   width: 150,  cellClass: 'text-right', cellFilter: 'number'}],
               enableColumnResize :true,
               plugins : [ new ngGridFlexibleHeightPlugin({
                  minHeight : 30,
                  maxHeight : 150
               }) ],
               i18n:'zh-tw',
               multiSelect : false
    };

How-To
We can use column filter to fulfill this requirement.
We can create a formatter to convert bugetStatus from code to description

 /* 轉換預算階段 
     * P0-預算案數
     * P1-預算數
     * F0-決算數
     * F1-院編決算數
     * F2-審定決算數
     */
    formatters.filter('budgetStatusFilter', function(){
    return function (budgetStatus){
        if(budgetStatus == 'P0'){
            return '預算案數';
        }else if(budgetStatus == 'P1'){
            return '預算數';
        }else if(budgetStatus == 'F0'){
            return '決算數';
        }else if(budgetStatus == 'F1'){
            return '院編決算數';
        }else if(budgetStatus == 'F2'){
            return '審定決算數';
        }
          
        };
    });

Apply this filter to bugetStatus column in dbm003eGrid1:

 $scope.dbm003eGrid1 = {
            data : 'dbm003eGrid1Data',
            selectedItems: $scope.dbm003eGrid1SelectedRow,
            columnDefs : [
               { field : 'accountYr',    displayName : '預算年度',   width: 100,  cellClass: 'text-left', cellFilter : 'mingGuoYearFilter'},
               { field : 'budgetStatus', displayName : '預算階段',     width: 100, cellClass: 'text-left', cellFilter : 'budgetStatusFilter'},
               { field : 'budgetCode', displayName : 'budgetCode', width: 0,   cellClass: 'text-left', visible : false},
               { field : 'budgetName', displayName : '預算別',     width: 200, cellClass: 'text-left'},
               { field : 'debtCode',   displayName : 'debtCode',   width: 0,    cellClass: 'text-left', visible : false},
               { field : 'debtName',   displayName : '債務別',     width: 400,  cellClass: 'text-left'},
               { field : 'budgetYearPeriod',  displayName : '預算年度',   width: 100,  cellClass: 'text-left'},
               { field : 'beginYear',   displayName : 'beginYear',   width: 0,    cellClass: 'text-left', visible : false},
               { field : 'endYear',     displayName : 'endYear',   width: 0,    cellClass: 'text-left', visible : false},
               { field : 'ttlAmount',   displayName : '預算總額',   width: 150,  cellClass: 'text-right', cellFilter: 'number'}],
               enableColumnResize :true,
               plugins : [ new ngGridFlexibleHeightPlugin({
                  minHeight : 30,
                  maxHeight : 150
               }) ],
               i18n:'zh-tw',
               multiSelect : false
    };

Test result

2015/09/10

[AngularJS] How to set CSS style conditionally

Requirement
We use ng-repeat directive instantiates a template once per item from a collection
Here is the code snippet:

<tbody data-ng-repeat="fms406v3 in fms406v3List" data-ng-form="formInTableRow" data-c-form-validation>
 <tr>
       <td class="text-left border-right"><span data-ng-bind="fms406v3.pdateWithDesc"></span></td>
       <td class="text-center border-right"><span data-ng-bind="fms406v3.rocWeekDate"></span></td>
    <!-- ignore .... -->
 </tr>
</tbody>

Our requirement is to set each row's background color depends on the date is workday or weekend. If the date is workday, then set its background color to white. If the date is weekend, then set its background color to yellow.

How-To
Apply ngStyle directive set CSS style on an HTML element conditionally.

Here is the code snippet for JavaScript:

//set row style: 假日底色顯示黃色；工作日底色顯示白色 
// 非工作日註記 (1: 休假日, 0: 工作日)
$scope.setRowStyle = function(noWorkInd){
    var rowStyle = null;
    if(noWorkInd == 0){ //工作日
        rowStyle = {'background-color' : 'white'};
    }else if(noWorkInd == 1){ //休假日
        rowStyle = {'background-color' : 'yellow'};
    }
    return rowStyle;
};

Here is the code snippet for HTML:

<tbody data-ng-repeat="fms406v3 in fms406v3List" data-ng-form="formInTableRow" data-c-form-validation>
  <tr data-ng-style="setRowStyle(fms406v3.noWorkInd)"  >
       <td class="text-left border-right"><span data-ng-bind="fms406v3.pdateWithDesc"></span></td>
       <td class="text-center border-right"><span data-ng-bind="fms406v3.rocWeekDate"></span></td>
    <!-- ignore .... -->
  </tr>
</tbody>

Test :

REFERENCES
[1] https://docs.angularjs.org/api/ng/directive/ngStyle

2015/09/02

[AngularJS] How to clear file input

Problem
After I select file and click reset button, but the file input value does not be cleared as expected.

Code snippet in HTML

<div class="row">
    <div class="col-sm-12">
        <div class="col-sm-6 ">
            <label class="control-label label-width-4 text-right">選擇檔案</label>
            <input id="attachment" name="attachment" type="file" class="form-control" 
                   data-ng-file-select="onSelect($files)" data-ng-model="attachment" 
                   style="width: 60%;">
        </div>
        <div class="col-sm-6 "></div>
    </div>
</div>

Code snippet in JavaScript

 $scope.onSelect = function($files) {
     $scope.attachment = $files[0].name;
     $scope.files = $files;
 };
 
 $scope.resetForm = function(){
    cAlerter.clear();
    
    $scope.dbm002eFormBean.impType = "";
    $scope.findImpTypes();
    $scope.dbm002eFormBean= $scope.dbm002eFormBean || {};
    $scope.dbm002eFormBean.updType = "0";
    
    $scope.attachment = null;
    $scope.files = null;               
 };

Solution
update resetForm Function:

 $scope.resetForm = function(){
    cAlerter.clear();
    
    $scope.dbm002eFormBean.impType = "";
    $scope.findImpTypes();
    $scope.dbm002eFormBean= $scope.dbm002eFormBean || {};
    $scope.dbm002eFormBean.updType = "0";
    
    $scope.files = null;
    
    //find all file input and set value to null
    angular.forEach(
      angular.element("input[type='file']"),
         function(inputElem) {
           angular.element(inputElem).val(null);
    });
 };

Reference
[1] http://stackoverflow.com/questions/15079779/how-to-clear-a-file-input-from-angular-js

2015/08/13

Promises in AngularJS

Problem
We would like to update the value which be marked by red rectangle in the following screenshot:

The value will be updated from 20 to 30:

After clicked save button, it will do search at once. The value seems does not be updated successfully, because the search result does not show the up-to-date value :

But as I click search button again, it show correct value.

original JavaScript code:

$scope.save = function(){            
    //do save
    fms426qService.save($scope.fms426qUpdateGridData);
    //do query
    $scope.query();
};

Solution
The root cause is the Javascript code had executed query before it finish its save action. Hence, you should make sure do query after save.

You can use Promises in AngularJS. The most powerful features of promises is the ability to chain them together. This allows the data to flow through the chain and be manipulated and mutated at each step.

Therefore, you should update JavaScript code as bellows::

$scope.save = function(){            
    //do save
    fms426qService.save($scope.fms426qUpdateGridData).then(function(response) {
        //do query after save
        $scope.query();
    });
};

Reference
[1] http://andyshora.com/promises-angularjs-explained-as-cartoon.html
[2] https://thinkster.io/a-better-way-to-learn-angularjs/promises

2015/04/23

[AngularJS] How to Clear Selection in ng-grid

Problem
As I selected a specific data row in ng-grid, it should fill in its data into data form

As I click clear button, it should clear the form data and selected item in ng-grid. But it does not work.

Here is the code snippet. I had set the the length of selectedItem to zero, but in vain.

 $scope.resetTab2 = function() {
     cAlerter.clear();
     $scope.clearValidationMessages();
     
     $scope.dbm100eTab2FormBean.seqNo = 0;
     //預算別
     $scope.dbm100eTab2FormBean.budgetCode = "";
     //債務別
     $scope.dbm100eTab2FormBean.debtCode = "";
     //發行額
     $scope.dbm100eTab2FormBean.debtIssueAmt = 0;
     //實收額
     $scope.dbm100eTab2FormBean.realAmount = 0;
     //溢(折)價金額
     $scope.dbm100eTab2FormBean.diversityAmount = 0;
     //發行成本額
     $scope.dbm100eTab2FormBean.issueCostAmount = 0;
     
     $scope.tab2CreateBtn = false;
     $scope.tab2EditBtn = true;
     $scope.dbm100eFormGrid2.selectedItems.length = 0;
 };

Solution
In addition to set selectedItems' length to zero, I also need to set selectAll to false.
Here is the revised code snippet:

 $scope.resetTab2 = function() {
     cAlerter.clear();
     $scope.clearValidationMessages();
     
     $scope.dbm100eTab2FormBean.seqNo = 0;
     //預算別
     $scope.dbm100eTab2FormBean.budgetCode = "";
     //債務別
     $scope.dbm100eTab2FormBean.debtCode = "";
     //發行額
     $scope.dbm100eTab2FormBean.debtIssueAmt = 0;
     //實收額
     $scope.dbm100eTab2FormBean.realAmount = 0;
     //溢(折)價金額
     $scope.dbm100eTab2FormBean.diversityAmount = 0;
     //發行成本額
     $scope.dbm100eTab2FormBean.issueCostAmount = 0;
     
     $scope.tab2CreateBtn = false;
     $scope.tab2EditBtn = true;
     $scope.dbm100eFormGrid2.selectedItems.length = 0;
     $scope.dbm100eFormGrid2.selectAll(false);
 };

Then it works now.

Reference
[1] https://github.com/angular-ui/ng-grid/issues/2243

[AngularJS] How to Unregister $scope.$watch

Problem
As I fill out values in this form and click create button

The data will insert into database, and the result will show in data grid which implement by AngularJS ng-grid.

As I click specific data row, the afterSelectionChange event will be triggered.
Owing to "預算別" and "債務別" are cascading dropdown list, the second dropdown list options will change as the value of the first dropdown list changed.
Therefore, we will watch the second dropdown list and fill in values in the form.

The problem is......if I just change the second dropdown list instead of click data grid, it will also go into watch. Because of it had start to watch, if you change the value of the second dropdwon list, it will call the watch code even you don't trigger afterSelectionChange.

Here is the code snippet

  afterSelectionChange : function (newValue, oldValue) {
     if(!angular.isUndefined($scope.grid2SelectedRow[0])){
          $scope.tab2EditBtn = false;
          $scope.dbm100eTab2FormBean.budgetCode = String($scope.grid2SelectedRow[0].budgetCode);
          //等待債務別下拉單長出來
          $scope.$watch("dbm100eTab2FormBean.debtCode", function(newValue, oldValue) {
              $scope.dbm100eTab2FormBean.debtCode = String($scope.grid2SelectedRow[0].debtCode);
              //發行額
              $scope.dbm100eTab2FormBean.debtIssueAmt    = $scope.grid2SelectedRow[0].issueAmount;
              //實收額
              $scope.dbm100eTab2FormBean.realAmount      = $scope.grid2SelectedRow[0].realAmount;
              //溢(折)價金額
              $scope.dbm100eTab2FormBean.diversityAmount = $scope.grid2SelectedRow[0].diversityAmount;
              //發行成本額
              $scope.dbm100eTab2FormBean.issueCostAmount = $scope.grid2SelectedRow[0].issueCostAmount;
              //PK
              $scope.dbm100eTab2FormBean.seqNo           = $scope.grid2SelectedRow[0].seqNo;
              
              $scope.tab2CreateBtn = true;
              $scope.tab2EditBtn = false;
              
          }, true);
                            }
 }

Solution
Therefore, we need to unregister watch if we do not need to watch.
Here is the revised code snippet

 afterSelectionChange : function (newValue, oldValue) {
    if(!angular.isUndefined($scope.grid2SelectedRow[0])){
         $scope.tab2EditBtn = false;
         $scope.dbm100eTab2FormBean.budgetCode = String($scope.grid2SelectedRow[0].budgetCode);
         //等待債務別下拉單長出來
         var unregister = $scope.$watch("dbm100eTab2FormBean.debtCode", function(newValue, oldValue) {
             $scope.dbm100eTab2FormBean.debtCode = String($scope.grid2SelectedRow[0].debtCode);
             //發行額
             $scope.dbm100eTab2FormBean.debtIssueAmt    = $scope.grid2SelectedRow[0].issueAmount;
             //實收額
             $scope.dbm100eTab2FormBean.realAmount      = $scope.grid2SelectedRow[0].realAmount;
             //溢(折)價金額
             $scope.dbm100eTab2FormBean.diversityAmount = $scope.grid2SelectedRow[0].diversityAmount;
             //發行成本額
             $scope.dbm100eTab2FormBean.issueCostAmount = $scope.grid2SelectedRow[0].issueCostAmount;
             //PK
             $scope.dbm100eTab2FormBean.seqNo           = $scope.grid2SelectedRow[0].seqNo;
             
             $scope.tab2CreateBtn = true;
             $scope.tab2EditBtn = false;
             
         }, true);
         
         //unregister watch after 3 sec.
         setTimeout(function() {
             unregister();  
         }, 3000);
  }
}

Reference
[1] http://stackoverflow.com/questions/14957614/angular-js-clear-watch

Total Pageviews