在Angular js中从jquery中选中还是取消选中？
Posted
技术标签:
【中文标题】在Angular js中从jquery中选中还是取消选中？【英文标题】：Make checked or unchecked from jquery in Angular js? 【发布时间】：2017-12-31 01:50:34 【问题描述】：如果选中了复选框，则在重新加载后应选中复选框，如果未选中则应取消选中。 在指令控制器中使用。
var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || ,
$checkboxes = $("#checkbox-container :checkbox");
$checkboxes.on("change", function()
$checkboxes.each(function()
checkboxValues[this.id] = this.checked;
);
localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
);
// On page load
$.each(checkboxValues, function(key, value)
$("#" + key).prop('checked', value);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="checkbox-container">
<div>
<label for="option1">Option 1</label>
<input type="checkbox" id="option1">
</div>
</div>我从https://www.sitepoint.com/quick-tip-persist-checkbox-checked-state-after-page-reload/获取的以上代码
以上代码运行良好。我也在使用 Angular js。当我在 ng-model 中使用时，值 $("#" + key).prop('checked', value); 不会在 html 页面中选中复选框。
<input type="checkbox" id="option1" ng-model="mycheckbox" data-ng-change="call()" />
Javascript 控制器：
$scope.call=function()
console.log("inside controller");
所以在这种情况下，JQuery 无法在 html 页面中创建 true(checked) 和 false(unchecked)。但是如果我不使用 ng-model 那么它会起作用。
【问题讨论】：
使用 ng-model 并且不要将 jquery 与 angular 混合使用。有关如何在没有 jquery docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D 的情况下执行此操作的更多信息 如果您要更新 Angular 代码之外的任何内容，那么您可能必须使用 scope.apply 来运行摘要循环。尽量避免在 Angular 中使用 Jquery。 【参考方案1】：请按照以下代码尝试。由于 CORS 问题 localstorage 无法正常工作，所以我注释掉了 localstorage 的代码。请参考以下代码。
angular.module('myApp',[])
.controller('myController',['$scope','$window',function($scope,$window)
$scope.checkboxValues=['true','false','true','false','true'];
//localStorage.setItem("checkboxValues",JSON.stringify($scope.checkboxValues));
//$scope.checkboxValues = JSON.parse($window.localStorage.getItem('checkboxValues')) || [];
$scope.changeCheckBoxVal=function(val,index)
$scope.checkboxValues[index] = true;
//localStorage.setItem("checkboxValues",JSON.stringify($scope.checkboxValues));
])<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body ng-app="myApp">
<div ng-controller="myController">
<div data-ng-repeat="chkBoxVal in checkboxValues track by $index">
<input type="checkBox" ng-model="chkBoxVal" data-ng-change="changeCheckBoxVal(chkBoxVal,$index)"/>
</div>
</div>
</body>
</html>【讨论】：
以上是关于在Angular js中从jquery中选中还是取消选中？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Angular 中从 js 执行空缓存和硬重新加载？
在 Spring Boot 应用程序中从 Angular JS 调用 Rest Services 时出错
用jquery和js获取select标签中选中的option值及文本