我想在角度js的狀態參數中設置複選框狀態？

Question

我正在實現複選框，我也想在URL中設置狀態（true，false）作爲參數但只有false值設置在url參數中。但是當我點擊複選框時，真正的值沒有在url中設置爲參數。我正在使用$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>

Answer 1

嘗試手動發射locationChangeSuccess事件。還錯過了在控制器中注入$ location。

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>

Answer 2

你檢查瀏覽器的錯誤控制檯？你錯過了注入$ 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}); 
}   
}) 

使用此。