albert's blog

2015/11/02

How to add more spaces between radio button and its text?

Problem
Our customer asked to add more spaces between radio button and its text

Original code snippet:

<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>

How-To
Modify the margin value for each input radio element.
i.e. margin:0px 0px 0px 6px;

top margin is 0px
right margin is 0px
bottom margin is 0px
left margin is 6px

Check the following updated code snippet:

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

Check result:

Reference
[1] http://www.w3schools.com/cssref/pr_margin.asp

2015/11/01

[閱讀筆記] The Intelligent Investor (Part 3)

與其恐懼熊市，智慧型投資者應該在熊市時，持續買進、強力買進、勇敢買進
不要想預測未來股市，你應該做的是定期定額投資，讓你的投資變成autopilot mode，你該專注的是你的long-term financial goals，而不是預測未來股市
所謂的"Performance" Funds，其投資標的聚焦於相對小型的產業，相信小型的產業會比大型的產業有較高的成長動能，冀望能打敗S&P 500指數，但是通常這類的funds的表現都只會是曇花一現
不要購買balanced funds(平衡型基金, 即股債混合型基金)，其表現欠佳，若要在投資組合中投資債券，建議購買美國儲蓄債券、評等A級以上的公司債券或免稅債券等
若完全只根據其過去的表現來購買基金，那會是一件很愚蠢的事情
購買基金須注意：一般的基金並沒有做到很好的選股；基金所收取的費用越高，收益越低；當一檔基金越頻繁交易股票，其收益就會越低；高度不穩定的基金，其價格就會傾向不穩定；過去的績效，不代表未來的績效
一檔表現優異的基金，或許無法幫助你打敗大盤表現，但是至少提供你一個較為經濟的方式，幫你節省掉選股的時間，讓你的投資組合多樣化
Index fund囊括市場大部份的股票，長期來說，其績效會打敗大部分的基金，交易成本也較低，唯一缺點是很無聊，你無法去吹噓你如何選股
Graham 建議，每月定期定額買進index fund，經過二十年，你會發現你的績效打敗大部分的理財專家
根據研究證明，基金收取的費用越高，其未來的收益會越低。high returns只會是暫時的，但是high expenses卻是固定的
在挑選基金的時候，記得把fund expenses當作第一優先的過濾條件。未來的收益無法預測，但是fund expenses則是唯一可以預測的，故若兩個表現差不多的基金，挑選fund expenses較低的那檔基金
不要只單看過去的績效來預測未來的績效，過去的贏家常常是未來的輸家，但是過去的輸家未必會是未來的贏家。所以，挑選基金時，避免挑選績效一直表現不好，且fund expenses高於平均的基金
想要購買封閉型基金(closed-end stock funds)的投資人，必須從其他股東手中買進他的股份，而其價格的高低，就要看供需的狀況而定
Graham 建議，出現以下情形時，可以考慮賣掉此檔基金：投資策略大改變(如價值型基金突然買進科技股、成長型基金突然買進保險股)、突然增加基金費用、基金公司突然頻繁的交易以及突然的不穩定的收益(如突然的巨額收益或損失)
如果你還沒準備好結婚，那你就不應該結婚。相同的，如果你還沒準備好忍受至少三年的基金低谷期，那你一開始的時候，就不應該買進基金。記住，耐性是投資人唯一且最有力量的盟友
人們希望尋求理專的理財建議來投資賺錢，是一件很天真的事情。如同商人會尋找專家或顧問來解決業務的問題，但是商人不會去問這些專家如何獲利
未來成長的潛力是由本益比來決定，本益比比風險、股利政策的評估都還要重要；然而許多分析師在進行買進股票評比時，常常只看到最近的價格，卻忽略了公司未來長期的展望
在挑選理專時，你可以問他：你如何選擇投資標的？你認為最成功的投資方法是什麼，有沒有實際的成功案例可以佐證？如果有一個投資標的持續一整年表現不佳，你會怎麼做？（當理專回答「賣出」的時候，可以跟這位理專說再見)
在挑選理專時，你可以問他：你的投資哲學是什麼？你是使用股票或是共同基金？你有使用技術分析嗎？你有使用適時進出市場法(market timing)嗎？(最後兩個問題如果至少出現一個YES，那你可以跟這位理專說NO)
理專要能告訴你完整的財務規劃，描述你未來會賺、存、花、借多少錢，以及如何幫你做投資；要提供你投資策略報告書，告訴你投資方法；要提供你資產配置計畫，詳述在不同的投資類別會放多少錢。
Graham 說：我在華爾街44年的經驗與研究，無論是採用簡單的算數、基礎或高等的幾何代數，我還沒有看過對於股票價值有可靠的計算方式
若投資標的沒有多樣化，是愚蠢的行為；但若過度多樣化，也是愚蠢的行為，因其會稀釋你的獲利。一般人很難去做汰弱留強的選擇，最理想的選擇是去買total stock market index fund，你不需要選股且享有低交易成本的優勢
選股的分析動作，通常從過去績效開始研究，記住，那是過去的績效，不代表未來就會跟過去的績效一樣(持續成長)。畢竟，未來一定會有各種有別於過去的新的競爭，在在影響著企業的獲利、穩定與成長。
根據歷史資料顯示，快速成長的公司，容易過熱和消失不見。每年稅後盈餘成長約6～7%的公司(溫和且穩定地成長)，反而存活比較久
Graham認為，選股五大要素包含：公司的長期展望、公司管理的品質、公司的財務強度與資本結構、每年的股利分配記錄以及股息率(殖利率)
積極型投資者於選股前，至少要去下載近五年的財報，了解公司成長動能從哪來？公司過去與未來的獲利從哪來？
要注意OPM(Other People's Money)的公司，其獲利來源不是來自本業，而是來自投資活動，這類公司不會存活太久。其可從現金流量表看出，若營運活動的現金流入為負，主要現金流入是靠投資活動，即為OPM addict公司
Graham認為，好的企業的定義是：產生的現金大於支出。企業管理者持續尋找方法來有效運用現金。長期來說，不管股票市場怎麼變動，符合此定義的企業，其企業價值一定會持續成長
公司會計相當狡猾，所以安全分析相當複雜，股票價值分析只有在特殊案例才會是可靠的。對於大部分的投資人來說，能做的是在適當的價格買入，然後長久持有。
資本支出是讓經營者讓企業成長的更大更好的基本工具。會計法允許經營者將營運成本轉換成資本支出，一些不肖的公司會用此美化公司營收。智慧型投資者，應該去了解公司的資本使用狀況

2015/10/31

2015/10/20

2015/10/16

[Java] Read properties file in java with new line characters in values

Requirement
If I would like to read property file, and I hope some characters will print in new line as expected.

How-to
You can add \n \ as the end of each line
Here is the property file:

dbm.getPredictedNumber=with predictedNumber as ( \n \
SELECT lpad(to_char(a.ACCOUNT_YR, 'yyyy')-1911, 3, '0') AS ACCOUNT_YR, \n \
       a.BUDGET_STATUS AS BUDGET_STATUS, \n \
       a.BUDGET_CODE AS BUDGET_CODE, \n \
       a.DEBT_CODE AS DEBT_CODE, \n \
       a.DATA_TYPE AS DATA_TYPE, \n \
       b.DEBT_TYPE AS DEBT_TYPE, \n \
       b.BOND_TYPE AS BOND_TYPE, \n \
       nvl(b.ALLC_AMOUNT, 0) AS ALLC_AMOUNT \n \
FROM \n \
  (SELECT ACCOUNT_YR, \n \
          BUDGET_CODE, \n \
          DEBT_CODE, \n \
          DATA_TYPE, \n \
          BUDGET_STATUS, \n \
          END_DATE, \n \
          MAX(BUDGET_STATUS) OVER (PARTITION BY ACCOUNT_YR, BUDGET_CODE, DEBT_CODE, DATA_TYPE, SUBSTR(BUDGET_STATUS, 0, 1)) AS maxBudgetStatus \n \
   FROM DBM091FA \n \
   WHERE DATA_TYPE IN ('C', \n \
                       'I')) a, \n \

The output:

DEBUG c.c.c.persistence.query.SqlExecutor - Executing SQL:with predictedNumber as ( 
SELECT lpad(to_char(a.ACCOUNT_YR, 'yyyy')-1911, 3, '0') AS ACCOUNT_YR, 
a.BUDGET_STATUS AS BUDGET_STATUS, 
a.BUDGET_CODE AS BUDGET_CODE, 
a.DEBT_CODE AS DEBT_CODE, 
a.DATA_TYPE AS DATA_TYPE, 
b.DEBT_TYPE AS DEBT_TYPE, 
b.BOND_TYPE AS BOND_TYPE, 
nvl(b.ALLC_AMOUNT, 0) AS ALLC_AMOUNT 
FROM 
(SELECT ACCOUNT_YR, 
BUDGET_CODE, 
DEBT_CODE, 
DATA_TYPE, 
BUDGET_STATUS, 
END_DATE, 
MAX(BUDGET_STATUS) OVER (PARTITION BY ACCOUNT_YR, BUDGET_CODE, DEBT_CODE, DATA_TYPE, SUBSTR(BUDGET_STATUS, 0, 1)) AS maxBudgetStatus 
FROM DBM091FA 
WHERE DATA_TYPE IN ('C', 
'I')) a,

Reference
[1] http://www.rgagnon.com/javadetails/java-0503.html

[Oracle] Using "WITH AS" to Refactor SQL

As-Is
Assume I have a SQL statement as bellows:

SELECT :startYear AS account_yr,
       budget_status AS budget_status,
       data_type AS data_type,
       sum(ALLC_AMOUNT) AS bondARest
FROM
  (SELECT lpad(to_char(a.ACCOUNT_YR, 'yyyy')-1911, 3, '0') AS ACCOUNT_YR,
          a.BUDGET_STATUS AS BUDGET_STATUS,
          a.BUDGET_CODE AS BUDGET_CODE,
          a.DEBT_CODE AS DEBT_CODE,
          a.DATA_TYPE AS DATA_TYPE,
          b.DEBT_TYPE AS DEBT_TYPE,
          b.BOND_TYPE AS BOND_TYPE,
          nvl(b.ALLC_AMOUNT, 0) AS ALLC_AMOUNT
   FROM
     (SELECT ACCOUNT_YR,
             BUDGET_CODE,
             DEBT_CODE,
             DATA_TYPE,
             BUDGET_STATUS,
             END_DATE,
             MAX(BUDGET_STATUS) OVER (PARTITION BY ACCOUNT_YR, BUDGET_CODE, DEBT_CODE, DATA_TYPE, SUBSTR(BUDGET_STATUS, 0, 1)) AS maxBudgetStatus
      FROM DBM091FA
      WHERE DATA_TYPE IN ('C',
                          'I')) a,
        DBM091FB b
   WHERE a.ACCOUNT_YR=b.ACCOUNT_YR
     AND a.BUDGET_CODE=b.BUDGET_CODE
     AND a.DEBT_CODE=b.DEBT_CODE
     AND a.DATA_TYPE=b.DATA_TYPE
     AND a.BUDGET_STATUS=b.BUDGET_STATUS
     AND a.BUDGET_STATUS=a.maxBudgetStatus
   ORDER BY a.ACCOUNT_YR,
            a.BUDGET_STATUS,
            a.BUDGET_CODE,
            a.DEBT_CODE)
WHERE budget_code=1
  AND debt_type=1
  AND bond_type=21
  AND account_yr BETWEEN '083' AND :startYear
GROUP BY budget_status,
         data_type
UNION
SELECT account_yr,
       budget_status,
       data_type,
       sum(ALLC_AMOUNT) bondARest
FROM
  (SELECT lpad(to_char(a.ACCOUNT_YR, 'yyyy')-1911, 3, '0') AS ACCOUNT_YR,
          a.BUDGET_STATUS AS BUDGET_STATUS,
          a.BUDGET_CODE AS BUDGET_CODE,
          a.DEBT_CODE AS DEBT_CODE,
          a.DATA_TYPE AS DATA_TYPE,
          b.DEBT_TYPE AS DEBT_TYPE,
          b.BOND_TYPE AS BOND_TYPE,
          nvl(b.ALLC_AMOUNT, 0) AS ALLC_AMOUNT
   FROM
     (SELECT ACCOUNT_YR,
             BUDGET_CODE,
             DEBT_CODE,
             DATA_TYPE,
             BUDGET_STATUS,
             END_DATE,
             MAX(BUDGET_STATUS) OVER (PARTITION BY ACCOUNT_YR, BUDGET_CODE, DEBT_CODE, DATA_TYPE, SUBSTR(BUDGET_STATUS, 0, 1)) AS maxBudgetStatus
      FROM DBM091FA
      WHERE DATA_TYPE IN ('C',
                          'I')) a,
        DBM091FB b
   WHERE a.ACCOUNT_YR=b.ACCOUNT_YR
     AND a.BUDGET_CODE=b.BUDGET_CODE
     AND a.DEBT_CODE=b.DEBT_CODE
     AND a.DATA_TYPE=b.DATA_TYPE
     AND a.BUDGET_STATUS=b.BUDGET_STATUS
     AND a.BUDGET_STATUS=a.maxBudgetStatus
   ORDER BY a.ACCOUNT_YR,
            a.BUDGET_STATUS,
            a.BUDGET_CODE,
            a.DEBT_CODE)
WHERE budget_code=1
  AND debt_type=1
  AND bond_type=21
  AND account_yr > :startYear
GROUP BY account_yr,
         budget_status,
         data_type
ORDER BY account_yr

You may notice the SQL statement which had been highlighted is duplicated.

To-be
You can utilize "with as..." to do SQL refactor.

The WITH clause, or subquery factoring clause, is part of the SQL-99 standard and was added into the Oracle SQL syntax in Oracle 9.2. The WITH clause may be processed as an inline view or resolved as a temporary table. The advantage of the latter is that repeated references to the subquery may be more efficient as the data is easily retrieved from the temporary table, rather than being requeried by each reference. You should assess the performance implications of the WITH clause on a case-by-case basis.

The foregoing SQL statement will be amended as following:

with predictedNumber as (
SELECT lpad(to_char(a.ACCOUNT_YR, 'yyyy')-1911, 3, '0') AS ACCOUNT_YR,
       a.BUDGET_STATUS AS BUDGET_STATUS,
       a.BUDGET_CODE AS BUDGET_CODE,
       a.DEBT_CODE AS DEBT_CODE,
       a.DATA_TYPE AS DATA_TYPE,
       b.DEBT_TYPE AS DEBT_TYPE,
       b.BOND_TYPE AS BOND_TYPE,
       nvl(b.ALLC_AMOUNT, 0) AS ALLC_AMOUNT
FROM
  (SELECT ACCOUNT_YR,
          BUDGET_CODE,
          DEBT_CODE,
          DATA_TYPE,
          BUDGET_STATUS,
          END_DATE,
          MAX(BUDGET_STATUS) OVER (PARTITION BY ACCOUNT_YR, BUDGET_CODE, DEBT_CODE, DATA_TYPE, SUBSTR(BUDGET_STATUS, 0, 1)) AS maxBudgetStatus
   FROM DBM091FA
   WHERE DATA_TYPE IN ('C',
                       'I')) a,
     DBM091FB b
WHERE a.ACCOUNT_YR=b.ACCOUNT_YR
  AND a.BUDGET_CODE=b.BUDGET_CODE
  AND a.DEBT_CODE=b.DEBT_CODE
  AND a.DATA_TYPE=b.DATA_TYPE
  AND a.BUDGET_STATUS=b.BUDGET_STATUS
  AND a.BUDGET_STATUS=a.maxBudgetStatus
ORDER BY a.ACCOUNT_YR,
         a.BUDGET_STATUS,
         a.BUDGET_CODE,
         a.DEBT_CODE
)
select :startYear AS account_yr, budget_status AS budget_status, data_type AS data_type, sum(ALLC_AMOUNT) AS bondARest
from
predictedNumber
where budget_code=1 and debt_type=1 and bond_type=21 and account_yr between '083' and :startYear
group by budget_status, data_type

union

select account_yr, budget_status, data_type, sum(ALLC_AMOUNT) bondARest
from
predictedNumber
where budget_code=1 and debt_type=1 and bond_type=21 and account_yr > :startYear
group by account_yr, budget_status, data_type
order by account_yr

Reference
[1] https://oracle-base.com/articles/misc/with-clause

2015/10/14

[Java] String.format

Requirement
If I have multiple string data, each string data include a Chinese character and an amount with string type, ex. 預 and 14.13

This kind of data should be formatted as bellows:

String format rule is:

The first Chinese string character should enclose with left and right parenthesis.
The second amount string character has fixed 16 spaces.

How-To
You can utilize String.format to fulfill this requirement

format

public static String format(String format,
            Object... args)

Returns a formatted string using the specified format string and arguments.The locale always used is the one returned by Locale.getDefault().

Parameters:: format - A format string; args - Arguments referenced by the format specifiers in the format string. If there are more arguments than format specifiers, the extra arguments are ignored. The number of arguments is variable and may be zero. The maximum number of arguments is limited by the maximum dimension of a Java array as defined by The Java™ Virtual Machine Specification. The behaviour on a null argument depends on the conversion.
Returns:: A formatted string
Throws:: IllegalFormatException - If a format string contains an illegal syntax, a format specifier that is incompatible with the given arguments, insufficient arguments given the format string, or other illegal conditions. For specification of all possible formatting errors, see the Details section of the formatter class specification.; NullPointerException - If the format is null
Since:: 1.5
See Also:: Formatter

Sample code:

    public static void main(String[] args) {
        // The first Chinese string character should enclose with left and right parenthesis.
        // The second amount string character has fixed 16 spaces.
        String strFormat = "(%s)%16s";

        System.out.println(String.format(strFormat, "預", "14.13"));
        System.out.println(String.format(strFormat, "決", "14.34"));
        System.out.println(String.format(strFormat, "預", "0.00"));
        System.out.println(String.format(strFormat, "決", "3.25"));
    }

Reference
[1] https://docs.oracle.com/javase/7/docs/api/java/lang/String.html#format(java.lang.String,%20java.lang.Object...)
[2] http://jax-work-archive.blogspot.tw/2015/02/java-stringformat.html

2015/10/12

[Oracle to SQL Server Migration] Outer Join

In Oracle, we use outer join, (+), in the SQL statement as bellows:

SELECT TO_CHAR(A.STA_DATE,'YYYYMMDD') AS STA_DATE,
       A.AGE,
       A.FUND_ID,
       A.MGE_TYPE,
       F_DBM_FIND_LAGE_NM(A.STA_DATE,A.AGE) AGE_NAME,
       F_DBM_FIND_FUND_NM(A.STA_DATE,A.AGE,A.FUND_ID) FUND_NAME,
       (A.IN_AMT/A.OUT_AMT) * 100 AS RATE0,
       (C.IN_AMT/C.OUT_AMT) * 100 AS RATE1,
       (D.IN_AMT/D.OUT_AMT) * 100 AS RATE2,
       (E.IN_AMT/E.OUT_AMT) * 100 AS RATE3
FROM DBM034FA A,

  (SELECT *
   FROM DBM034FA
   WHERE TO_CHAR(STA_DATE,'YYYY')=:accountYr +1910) C,

  (SELECT *
   FROM DBM034FA
   WHERE TO_CHAR(STA_DATE,'YYYY')=:accountYr +1909) D,

  (SELECT *
   FROM DBM034FA
   WHERE TO_CHAR(STA_DATE,'YYYY')=:accountYr +1908) E
WHERE TO_CHAR(A.STA_DATE,'YYYY')=:accountYr +1911
  AND A.AGE = C.AGE(+)
  AND A.FUND_ID = C.FUND_ID(+)
  AND A.MGE_TYPE=C.MGE_TYPE(+)
  AND A.AGE = D.AGE(+)
  AND A.FUND_ID = D.FUND_ID(+)
  AND A.MGE_TYPE=D.MGE_TYPE(+)
  AND A.AGE = E.AGE(+)
  AND A.FUND_ID = E.FUND_ID(+)
  AND A.MGE_TYPE=E.MGE_TYPE(+)

Owing to (+) is the specific approach to do outer join in Oracle, it does not work in SQL Server.
Hence, the foregoing SQL statement should be translated as following:

select t.STA_DATE as STA_DATE, 
       t.AGE, 
       t.FUND_ID, 
       t.MGE_TYPE, 
       t.AGE_NAME, 
       t.FUND_NAME, 
       t.RATE0, 
       t.RATE1, 
       t.RATE2, 
       t.RATE3
from
(
SELECT CONVERT(VARCHAR(4), A.STA_DATE, 112),
       A.AGE,
       A.FUND_ID,
       A.MGE_TYPE,
       AP_NTA.F_DBM_FIND_LAGE_NM(A.STA_DATE,A.AGE) AGE_NAME,
       AP_NTA.F_DBM_FIND_FUND_NM(A.STA_DATE,A.AGE,A.FUND_ID) FUND_NAME,
       (A.IN_AMT/A.OUT_AMT) * 100 AS RATE0,
       (C.IN_AMT/C.OUT_AMT) * 100 AS RATE1,
       (D.IN_AMT/D.OUT_AMT) * 100 AS RATE2,
       (E.IN_AMT/E.OUT_AMT) * 100 AS RATE3
FROM DBM034FA A

LEFT OUTER JOIN
  (SELECT *
   FROM DBM034FA
   WHERE CONVERT(VARCHAR(4), STA_DATE, 112)=:accountYr +1910) C
ON    
  A.AGE = C.AGE
  AND A.FUND_ID = C.FUND_ID
  AND A.MGE_TYPE=C.MGE_TYPE

LEFT OUTER JOIN
  (SELECT *
   FROM DBM034FA
   WHERE CONVERT(VARCHAR(4), STA_DATE, 112)=:accountYr +1909) D
ON
  A.AGE = D.AGE
  AND A.FUND_ID = D.FUND_ID
  AND A.MGE_TYPE=D.MGE_TYPE

LEFT OUTER JOIN
  (SELECT *
   FROM DBM034FA
   WHERE CONVERT(VARCHAR(4), STA_DATE, 112)=:accountYr +1908) E
ON   
  A.AGE = E.AGE
  AND A.FUND_ID = E.FUND_ID
  AND A.MGE_TYPE=E.MGE_TYPE
 ) t
 where t.STA_DATE=:accountYr +1911

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';
    }
};