Total Pageviews

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):
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 <!-- 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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
 <!-- 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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- * 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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!-- 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';
    }
};


Posted by Albert Kuo at 11:13 AM
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)