Question

我想在点击

时启用复选框

<a href="https://www.google.com" target="_blank">Google</a>

我的html代码如下所示

<div class="wrapper">
    <div class="container">
        <section class="main-ctr">
            <div class="error-msg" ng-show="showError">
                <div class="text">Please fix the validation error(s) below and try again</div>
            </div>
            <div class="error-msg" ng-show="serviceErrorMsg">
                <div class="text">{{serviceErrorMsg}}</div>
            </div>
            <header class="security-header">
                <img src="images/lock.png" alt="Security" class="security">
            </header>
            <main class="sm-main">
                <section class="fix-section security">
                    <h1>Security and privacy is important to us </h1>
                    <p>Please read the <a href="https://www.google.com" target="_blank"">Google</a></p>
                    <label class="control control--checkbox m-t-45">I conﬁrm that I have read, understood and agree to
                        the above
                        <input type="checkbox" ng-model="terms.agreed"/>
                        <div class="control__indicator"></div>
                    </label>
                    <span class="error" ng-if="showError">Please select checkbox</span>
                </section>
                <div class="clear"></div>
                <div class="button-ctr">
                    <button class="button" ng-class="terms.agreed ? 'active' : 'disable'" ng-click="proceed()">Agree</button>
                </div>
            </main>
        </section>
    </div>
</div>
<div id="loading" ng-if="showLoader">
    <img src="images/loader.gif" id="loading-image">
</div>

我的控制器代码如下所示

.controller('agreementCtrl', ['$rootScope', '$scope', '$state', '$window', 'globalService', 'dataServices', function ($rootScope, $scope, $state, $window, globalService, dataServices) {
    $scope.terms = {
        agreed: false
    }
    $scope.showLoader = false;
    $scope.proceed = function () {
        if (!$scope.terms.agreed) {
            $scope.showError = true;
            return;
        }

        $scope.showLoader = true;
    }
}

所以我希望当有人点击谷歌链接后我必须启用我的复选框。

Answer 1

您可以在控制器中拥有变量和事件处理函数，例如

$scope.isLinkClicked = false;

$scope.onLinkClick = function(){
   $scope.isLinkClicked = true;
}

在a附加一个事件处理程序并在ng-disabled上使用input指令

<a href="https://www.google.com" target="_blank" ng-click="onLinkClick()" >Google</a>

<input type="checkbox" ng-model="terms.agreed" ng-disabled="!isLinkClicked"/>

工作示例

var app = angular.module('app', []);

app.controller('MyCtrl', ['$scope', function($scope){
  
  $scope.isLinkClicked = false;
  
  $scope.onLinkClick = function(){
    $scope.isLinkClicked = true;
  };
  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">
  <a href="https://www.google.com" target="_blank" ng-click="onLinkClick()" >Google</a>

    <input type="checkbox" ng-model="terms.agreed" ng-disabled="!isLinkClicked"/>
</div>

单击href时Angularjs启用复选框

1 个答案: