Question

我有一个带复选框的搜索屏幕，并希望在用户导航并返回到屏幕时保留复选框选择。使用会话存储，我能够保留模型中的值，但选中的复选框根据模型值显示不正确。当我在线搜索时，看起来我不能同时使用ng-model和ng-checked。但我也不想使用jquery。只用Angular可以做到这一点吗？在此先感谢。

<div class="container" ng-controller="SearchController as vm" data-ng-init="vm.init()">
<form ng-submit="vm.Search()">
<input type="checkbox" id="chkActive" name="chkActive" value="Active"  ng-model="vm.searchInput.active" ng-checked="vm.searchInput.active"  /> <span>Show Active Records</span>
 <button id="searchBtn" type="submit">
</form>
</div>

角度控制器代码：

vm.searchInput = { active: true};

vm.init = function () {
if ($window.sessionStorage.getItem("Search_Active")) {
    vm.searchInput.active = $window.sessionStorage.getItem('Search_Active');   }
}

vm.Search = function () {
    $window.sessionStorage.setItem('Search_Active', vm.searchInput.active);
}

Answer 1

我还没有检查过，但我确定第一行应该是：

vm.searchInput = { active: true};

Answer 2

如果模型值存在，您想要绑定它，并且您知道它是好的那么为什么您需要checked和model？将值绑定到输入就足够了。如下所示，使用两者都是有问题的。

angular.module('app', []);
angular.module('app').controller('c', c);

function c() {
  var self = this;
  self.checked = true;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app "app" ng-controller="c as ctrl">
  <div>
    <label>Checked</label>
    <input type="checkbox" ng-model="ctrl.checked" />
    <div>
      <span>Checked: {{ctrl.checked}}</span>
    </div>
  </div>
  <div>
    <label>Checked Trouble</label>
    <input type="checkbox" ng-model="ctrl.checked" ng-checked="!ctrl.checked" />
    <div>
      <span>Checked: {{ctrl.checked}}, !Checked: {{!ctrl.checked}}</span>
    </div>
  </div>
    <div>
    <label>Checked Double Trouble</label>
    <input type="checkbox" ng-checked="!ctrl.checked" ng-model="ctrl.checked" />
    <div>
      <span>Checked: {{ctrl.checked}}, !Checked: {{!ctrl.checked}}</span>
    </div>
  </div>
</div>

AngularJS Checkbox在页面重新加载时保留检查值

2 个答案: