jsonが空の場合はボタンを無効にする

Question

CSSまたは角度を使用してボタンを無効にする必要がありますが、jsonに準拠する必要があります。book.BookGangaが空であればボタンを無効にする必要があります。book.BookGanga空でない場合は、ボタンを表示する必要があります。

<div class="modal fade" id="example{{$index}}" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <!--the modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button class="btn btn-danger" style="float:right" type="button" data-dismiss="modal">&times;</button> 
       <h2 class="modal-title text-center">{{book.Name}}</h2> 
       <h5 class="text-center">{{book.Type}}</h5> 
      </div> 
      <div class="modal-body"> 
       <div class="row"> 
        <div class="col-md-2"> 
         <img ng-src="{{book.ImageUrl}}" class="img-responsive" " /> 
                </div> 
                <div class="col-md-10 "> 
                 {{book.Description}} 
                 <hr /> 
                  <h5>Pages: {{book.pages}}</h5> 
                  <h5>Price: {{book.Rate}}</h5> 
                  <h5>Language: Marathi</h5> 
                  <h5>Binding: Paperback</h5> 
                  <h5> Authors: Sri Dr. Narayananandanatha katesvamiji </h5> 
                </div> 
               </div> 
              </div> 
              <div class="modal-footer "> 
               <div class="fb-share-button " data-href="{{book.BookGanga}} " data-layout="button_count " data-size="large " data-mobile-iframe="true "><a class="fb-xfbml-parse-ignore " target="_blank " href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse ">Share</a></div> 
               <a class="btn btn-success " style="margin-top:-.2em; " href="{{book.BookGanga}} "><span class="glyphicon glyphicon-shopping-cart "></span>&nbsp; Buy Online</a> 
              </div> 
             </div> 
            </div> 
           </div> 

Answer 1

あなたにもこれを試すことができますので、私はあなたのブートストラップを使用していると思う：

<button ng-class = "{disabled : book.BookGanga.length == 0}"> 

Find out the learning material for the ng-Class

を、私はそれはあなたのために働くことを願っています。

Answer 2

注：これは角2溶液ではなく、AngularJS 1

これは（これは、オブジェクトのプロパティの存在および非空虚をチェックする冗長方式）で十分です。重要な部分は、条件付きでDOM要素を作成しngIf、次のとおりです。

<a class="btn btn-success" style="margin-top:-.2em;" [href]="book.BookGanga" *ngIf="book.BookGanga !== undefined && book.BookGanga !== null && book.BookGanga !== ''"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp; Buy Online</a> 

Answer 3

ちょうどあなたのボタンにng-disabled="!book.BookGanga"を追加します。

Answer 4

ng-disabled attrを追加するだけです。