2017-10-23 15 views
1

条件が満たされている場合はクラスを追加したいと思います。ngクラスを追加しました。値が100になるとクラスを追加したいと思います。指令。私はこれがngクラスで可能であることを知っています、私はこれを実装する方法を忘れてしまっただけです。
AngularJSの条件式

angular.directive 'atomProgressbar', ($patterns, $atomicService) -> 
 
    template: """ 
 
    <progress ng-class="{'progress-100: progress.value == 100'}" id='progress-bar' max='100' value='50'></progress> 
 
    """ 
 
    scope: $patterns.NGBindings(pattern.bindings) 
 
    link: ($scope) -> 
 
    $atomicService.processBindings(pattern, $scope) 
 

 
# EXAMPLE -> 
 
# %atom-progress{:max => "100", :value => "0"} 
 

 
export default pattern

+2

私はあなただけで構文エラーがあり、それは代わりに 'NG-クラス= "{ '進歩-100':progress.value == 100}" である必要がありますかなり確信しています' 。 –

+0

構文エラーをキャッチしていただきありがとうございます。 {ng-class = "{'progress-100':progress.value == 100}"また、このメソッドを使ってみました。 100 '} "'それはどちらも動作していません – ThomasBrushel

答えて

1

あなたは50に進捗値を設定され、その後、NG-クラスの進行状況値は値がスコープ変数にバインドする必要がある100です。私はあなたのJSコードを持っていないので、私はあなたの実際のコードであると仮定しています。私は正しい構文でうまく動作していることを実証するためにプランナーを作成しました。まだ動作していない場合は、どこが間違っているかを知るために完全なコードを確認する必要があります。要素を調べるときに「progress-100」クラスが追加されていますか?

http://plnkr.co/edit/11v47PalZgn7vIOKLfFR?p=preview

<body ng-controller="MainCtrl"> 
    <p>Hello {{name}}!</p> 
    <progress ng-class="{'progress-100':value == 100}" id='progress-bar' max='100' value={{value}}></progress> 

    </body> 
+0

私は更新されたコードで新しいスレッドを開始しました。私はすべての場所にある。しかし、私はそれがリンク機能で引き起こされる必要があると思う – ThomasBrushel