在複選框上使用服務和ng級單擊

var app = angular.module('myApp', []); 

app.controller('checkCtrl', ['$scope','sharedService', function($scope, sharedService) { 
    $scope.isCutScore = function() { 
     if($scope.cc) { 
      alert('Checked'); 
      $scope.val = true; 
     } else { 
      alert('Unchecked'); 
     } 
    }; 
}]); 


app.controller('divCtrl', ['$scope', 'sharedService', function($scope, sharedService) { 

    $scope.addClass = function() { 
     if(flag == true) { 
      return EL; 
     } else { 
      return EP; 
     } 
    }; 
}]); 


app.service('sharedService', function() { 
    var flag = false; 
    if(angular.element('#cutScoreCheck').is(':checked')) { 
     flag = true; 
    } else { 
     flag = false; 
    } 
});

單擊複選框，使用ng-class添加和刪除類到div。但挑戰是我們需要應用和刪除類的複選框和div位於不同的控制器中。這裏的強制是使用兩個控制器共享的服務。在如果我們選中複選框以下示例中，「EL」類應適用，如果我們檢查標記，這個類將被刪除，「EP」應適用。在複選框上使用服務和ng級單擊

Code

來源

2017-06-14 Saily Jadhav

你可以使用這個。作品here。

我已經添加功能服務時，它會被調用時用戶選中複選框和我用$rootScope以達到在不同的控制器AddClass方法。

你的身體HTML

<body ng-app="myApp"> 
<div class="row"> 
    <div class="col-sm-4 checkDiv" ng-controller="checkCtrl"> 
     <input type="checkbox" id="cutScoreCheck" ng-model="cc" ng-change="checkDiv()"/> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-4 container" ng-controller="divCtrl" ng-class="flag ? 'EL' : 'EP'">500</div> 
</div> 

    <script src="CtrlCheck.js"></script> 

</body>

的js部分：

var app = angular.module('myApp', []); 

app.controller('checkCtrl', ['$scope','sharedService', '$rootScope',function($scope, sharedService,$rootScope) { 

    $scope.checkDiv = function(){ 
     var flag = sharedService.CheckDiv($scope.cc); 
     $rootScope.addClass(flag); 

    } 

}]); 


app.controller('divCtrl', ['$scope', 'sharedService', '$rootScope',function($scope, sharedService,$rootScope,$apply) { 
    $scope.flag = false; 
    $rootScope.addClass = function(flag) { 
     if(flag == 'true') { 
      $scope.divClass = "EL"; 
     } else { 
      $scope.divClass = "EP"; 
     } 
     console.log(flag) 
     $scope.flag = flag; 
    }; 

}]); 


app.service('sharedService', function() { 
    var flag = false; 

    this.CheckDiv = function (isChecked) { 
     if(isChecked) { 
      flag = true; 
     } else { 
      flag = false; 
     } 

     return flag; 
    } 

});

來源

2017-06-14 20:53:15 hasan

內納克級的我渴望有一個條件納克級。「EL」和「EP」類也沒有被添加到它的點擊上。 @hasan –

@SailyJadhav我已經更新的答案，你可以再次檢查 – hasan

@SailyJadhav我也更新Plunkr鏈接 – hasan

在複選框上使用服務和ng級單擊

回答

相關問題