CODEWITHSUNDEEP
javascriptangularjscheckbox
Varun Sharma
Varun Sharma

Reputation: 4842

I want to to set checkbox status in state parameter in angular js?

I am implementing checkbox and also I want to set status(true, false) in url as a parameter But only false value is set in url parameter. But When I click on checkbox then true value is not set in url as a parameter. I am using $location.search. I not able to find out what is the issue with true value.

var app = angular.module('demo', ['rzModule', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $timeout) {    
  $scope.confirm = function(){
     alert($scope.checkboxModel.value);
     $location.search({checkbox: $scope.checkboxModel.value});           
  }          
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
   
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
   
<div ng-app="demo">
  <div ng-controller="MainCtrl" class="wrapper">
  checkbox status should set in url as parameter
    <label>
        <input type="checkbox" ng-model="checkboxModel.value" data-ng-change="confirm()"/>
    </label>
  </div>
</div>

Upvotes: 1

Views: 59

Answers (2)

shiva
shiva

Reputation: 223

Did you check your browser's console for errors? You missed to inject $location.

var app = angular.module('demo', ['rzModule', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $location) {    
  $scope.confirm = function(){
  $location.search({checkbox: $scope.checkboxModel.value});   
}          
})

Use this.

Upvotes: 0

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

Try to emit the locationChangeSuccess event manually. and also You missed to inject $location in the controller.

var app = angular.module('demo', ['rzModule', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $location) {
  $scope.confirm = function() {
    alert($scope.checkboxModel.value);

    $location.search({
      checkbox: $scope.checkboxModel.value
    });
    $scope.$emit('$locationChangeSuccess');
    console.log($location.search());
  }
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>

<div ng-app="demo">
  <div ng-controller="MainCtrl" class="wrapper">
    checkbox status should set in url as parameter
    <label>
              <input type="checkbox" ng-model="checkboxModel.value" data-ng-change="confirm()"/>
            </label>
  </div>
</div>

Upvotes: 1

Related Questions