2016-09-14 5 views
-3

私は以下のようなフォームフィールドとそのようなものを持っています。私は組織の任意のフィールドが「偽」が、NG-場合は使用しないようなフィールドにアスタリスクを追加したいjQueryを使用して必要なフィールドにアスタリスクを追加します

var Org = { 
     validate : { 
       'planCode':{ 
           'optional' : 'false', 
           'validation' : 'required', 
       }, 
       'organizationCode':{ 
           'optional' : 'false', 
           'validation' : 'required', 
       }, 
       'vacancies':{ 
           'optional' : 'false', 
           'validation' : 'number required', 
           'allowing' : 'range[1;100]', 
       }, 
       'planDate':{ 
           'optional' : 'false', 
           'validation' : 'required date', 
           'format' : 'MM/dd/yyyy', 
       }, 
       'priorityCode':{ 
           'optional' : 'false', 
           'validation' : 'required', 
       }, 
       'description':{ 
       }, 
       'statusCode':{ 
       }, 
     } 
    }; 

次のように

<div class="form-group" ng-show="!role.vacancies"> 
    <label for="vacancies" class="col-md-3 control-label"> VACANCIES </label> 
    <div class="col-md-9"> 
    <input name="vacancies" type="text" id="vacancies" ng-model="Org.vacancies" placeholder="VACANCIES" class="form-control"> 
    </div> 
</div> 

組織変数です。あなたはjQueryの経由でそれを追加したいのはなぜ

+1

は、なぜあなたは 'NG-if'を使用したくありませんか? – Soviut

+0

{{Ord.validate.vacancies.optional === 'false'のようなcurliesを使用していますか? '*': ''}}をテンプレートに追加します。 –

+0

アスタリスクを表示するCSSクラスがありますか? –

答えて

0

私をout.Thanks助けてください? CSSを使用してこれを行うこともできます。

input:required { 
 
    position: relative; 
 
} 
 
input:required { 
 
    vertical-align: top; 
 
    background: url('https://cdn3.iconfinder.com/data/icons/fatcow/16/asterisk_orange.png') no-repeat center right; 
 
    background-size: 16px 16px; 
 
    padding-right: 20px; /* so text doesn't overlap with asterisk mark image */ 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="form-group" ng-show="!role.vacancies"> 
 
    <label for="vacancies" class="col-md-3 control-label">VACANCIES</label> 
 
    <div class="col-md-9"> 
 
    <input name="vacancies" type="text" id="vacancies" ng-model="Org.vacancies" placeholder="VACANCIES with required" class="form-control" required> 
 
    </div> 
 
</div> 
 
<div class="form-group" ng-show="!role.vacancies"> 
 
    <label for="vacancies" class="col-md-3 control-label">VACANCIES</label> 
 
    <div class="col-md-9"> 
 
    <input name="vacancies" type="text" id="vacancies-1" ng-model="Org.vacancies" placeholder="VACANCIES not required" class="form-control"> 
 
    </div> 
 
</div>

関連する問題