我想在角度js的状态参数中设置复选框状态?

时间:2017-07-30 14:29:41

标签: javascript angularjs checkbox

我正在实现复选框,我也想在url中设置status(true,false)作为参数但是在url参数中只设置了false值。但是当我单击复选框时,则不会在url中将true值设置为参数。我正在使用$location.search。我无法找出真正价值的问题。

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>

2 个答案:

答案 0 :(得分:1)

尝试手动发出 locationChangeSuccess 事件。而且你错过了在控制器中注入$ location。

&#13;
&#13;
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());
  }
})
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您是否检查过浏览器的控制台是否有错误?你错过了注入$ 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});   
}          
})

使用此功能。