使用angularjs单击按钮后禁用div

时间:2016-01-04 12:05:13

标签: angularjs

我尝试在使用angularjs.单击按钮后禁用div。我尝试在div中使用ng-disabled属性。但是我无法执行此操作。任何人都可以帮助关于这个问题我...

我的HTML代码:

 <button style="margin-left: 22px; margin-top: 16px; background-color: #73AD21" ng-click="getHome()">Home</button>

<div style="margin-top: 15px; display: inline-block"
                    ng-repeat="imageSource in imageSources">
                    <img width=40 height=50 style="margin-left: 12px;"
                        ng-src="{{imageSource}}" /> <br> <span
                        style="margin-left: 12px;">{{getFilenameFromPath(imageSource)}}</span>
                </div>

我的js代码:

$scope.imageSources = [];
    $scope.imageSources.push('images/Open.png');
    $scope.imageSources.push('images/New.jpg');
    $scope.imageSources.push('images/Save.png');

    $scope.getFilenameFromPath = function(filename) {
        return filename.split("/")[1].split(".")[0];
    }
$scope.getHome = function() {

        window.location = "./Home.html";
    }

1 个答案:

答案 0 :(得分:0)

html文件我添加了ng-class={'disabled':isClicked}

 <button style="margin-left: 22px; margin-top: 16px; background-color: #73AD21" ng-click="getHome()" ng-class={'disabled':isClicked}>Home</button>

<div style="margin-top: 15px; display: inline-block"
                    ng-repeat="imageSource in imageSources">
                    <img width=40 height=50 style="margin-left: 12px;"
                        ng-src="{{imageSource}}" /> <br> <span
                        style="margin-left: 12px;">{{getFilenameFromPath(imageSource)}}</span>
                </div>

在js我添加了一个proeperty isClicked

$scope.imageSources = [];
    $scope.imageSources.push('images/Open.png');
    $scope.imageSources.push('images/New.jpg');
    $scope.imageSources.push('images/Save.png');

    $scope.getFilenameFromPath = function(filename) {
        return filename.split("/")[1].split(".")[0];
    }

$scope.isCliked =  false;

$scope.getHome = function() {

        $scope.isClicked = !$scope.isClicked;
        window.location = "./Home.html";
    }

我还添加了一个css类.disabled

.disabled{
    pointer-events:none;
}

单击isClicked时变为true,按钮元素添加.disabled class