Question

我需要使用css或angular来禁用一个按钮，但它必须是根据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

注意：这是Angular 2的解决方案，而不是AngularJS 1

这应该足够了（这是检查对象属性的存在和非空的详细方法）。重要的部分是ngIf，它有条件地创建DOM元素：

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

只需将ng-disabled="!book.BookGanga"添加到按钮即可。

Answer 3

我认为你正在使用Bootstrap，所以你也可以试试这个：

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

Find out the learning material for the ng-Class

我希望它对你有用。

Answer 4

您只需添加ng-disabled attr即可

如果json为空，则禁用按钮

4 个答案: