AngularJS aktivieren Checkbox, wenn Klick auf href

Question

ich Checkbox aktivieren möchten, wenn Klick auf

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

Mein HTML-Code unten

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

Mein Controller-Code unten

.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; 
    } 
} 

gegeben gegeben wird

Also möchte ich, dass wenn jemand auf Google Link erst danach klicken, muss meine Checkbox aktiviert sein.

Answer 1

Sie eine Variable und ein Event-Handler-Funktion in der Steuerung wie

$scope.isLinkClicked = false; 

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

Und auf der a befestigen einen Event-Handler und verwenden ng-disabled Richtlinie über die input

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

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

Arbeitsbeispiel

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>